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Welcome to NetObjects Fusion 



NetObjects Fusion® 7.5 is the essential tool for building effective Web sites. 
Whether you are a professional Web site designer or designing a site for a small 
business or your family, you can use NetObjects Fusion to design your site quickly 
and easily. 


Map out your site structure by dragging and dropping page icons. NetObjects 
Fusion automatically creates and updates navigation and links. Lay out your pages 
quickly by dragging text, graphics, and multimedia into place. Select from dozens 
of SiteStyles®, or customize or create your own to apply a consistent visual theme 
throughout your site. 



Build a Digital Photo Gallery 



Use the Photo Gallery tool to put your images on the Web in minutes. Select the 
images you want to use, choose a display format, and NetObjects Fusion does the 
rest. Your photo gallery is published to the Web for your friends and family to view. 



Create an E-Commerce Catalog 



Simplify the process of building your online store with NetObjects Fusion and 
match your catalog with the look and feel of your Web site. With just a few clicks 
you can easily create a catalog, add products and images, and arrange them so that 
navigation is effortless. Then, integrate credit card processing for an effective way 
to deliver world-class products and services to your customers online. 



Add Dynamic Content 



NetObjects Fusion makes it easy for you to add dynamic content to your site 
whether you want simple object animation or custom JavaScript actions. You can 
have objects ﬂy across the screen as the result of a site visitor’s action. Or you can 
launch a sequence of animations at any given time. NetObjects Fusion contains 
powerful message-based animation and interactive authoring capabilities that you 
can use to achieve these effects. 
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Build Your Site’s Success 



Build Your Site’s Success 



Building your site is just the beginning. NetObjects Fusion provides direct access to 
online resources that offer information and guidance for making your site 
successful. You can learn to host and promote your site, set up an online store, track 
site visitors, and build personal relationships with your customers. Templates, 
hundreds of SiteStyles, and components that can add new power to NetObjects 
Fusion and new features to your Web pages are available for you to download. 



How to Get Started with NetObjects Fusion 



To ensure success as you start building Web sites with NetObjects Fusion 7.5, use 
the tools provided with the program to get started quickly. 



QuickStart Tips 



For information about basic NetObjects Fusion concepts, choose NetObjects 
Fusion QuickStart tips from the Help menu. 


If you do not have a site open and you go to a NetObjects Fusion view, you see a 
page of tips about working in that view. Once you create or open a site, the View 
tips are no longer available. To see the View tips again, close the site. 



Step-by-Step 



NetObjects Fusion Getting Started contains step-by-step instructions that provide 
the quickest path to learning how to build Web sites with NetObjects Fusion. 


✦ In Chapter 1, “Building a Site in 10 Minutes,” you build a small site that 
provides the framework for all the lessons that follow. 


✦ Chapter 2, “Touring NetObjects Fusion,” uses the site you built to introduce 
important NetObjects Fusion features. 


✦ Chapter 3, “Designing Site Navigation,” shows you how to set up links to each 
page in the site so site visitors have access to all pages. 


Completing the steps in the ﬁrst three chapters helps you develop the most critical 
skills. You can do the steps in one or all of the other chapters in any order you 
choose. 
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In-Depth Information 


This manual, NetObjects Fusion User Guide, provides information on all 
NetObjects Fusion features and functions, from the basics of designing with text 
and graphics, creating links, and so on, to information about forms, data publishing, 
and using NetObjects Fusion Components. Information in this guide is arranged by 
topic. Take some time to look through this manual to learn about the broad range of 
features available in NetObjects Fusion. 


Conventions Used in This Guide 


NetObjects Fusion often provides multiple ways to accomplish a task. For example, 
to display a page in Page view, you can click the Page button on the control bar, 
choose Page from the View menu, or press Ctrl+3. Procedures in this guide 
generally include the most convenient method, but other methods are usually 
available. If you are most comfortable using menu commands, you will probably 
ﬁnd the item you are looking for on a menu even if it is not explicitly included in 
the steps. If you prefer using shortcut keys, check the NetObjects Fusion Quick 
Reference card for information. 


For readability, this manual presents all ﬁle names, paths, ﬁle extensions, HTML 
tags, and URLs like this. Example names that you should replace with your own 
names appear in bold italic. 


Both this manual and the online help assume you are proﬁcient with Windows 98, 
Windows NT, Windows 2000, Windows ME, or Windows XP. If you need help 
using these systems, consult their respective user guides. This guide also assumes 
you are familiar with the World Wide Web and its terminology. For general advice 
about the Web and examples of how to use NetObjects® products, visit Online 
view. 
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Getting Help 


Getting Help 


NetObjects Fusion offers several options for getting online help. 


For topic help, select Help Topics from the Help menu to launch the help system 
and display the table of contents. 


To ﬁnd information in the online topic help, click: 


✦ a book on the Contents tab and then double-click a topic to see the information 
it contains. 


Use the >> button to move forward through topics in sequential order. 


Use the << button to move backward through the sequence. 


Click the Back button to return to the last topic you viewed. 


Look at the topics in the Quick Reference book to ﬁnd keyboard shortcuts. 


✦ the Index tab and enter a keyword related to your topic. 


✦ the Search tab and type the word or phrase you want to search for. 


Click to move 
forward and 
backward 
through a 
sequence of 
related topics 
Click a book to 
see the topics it 
contains; click a 
topic to see 
speciﬁc 
information 


Click to return to 
the last topic you 
viewed 


Open this book 
to see keyboard 
shortcuts 


Click the 
underlined 
text in an 
overview 
topic to jump 
to detailed 
information 
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To see information about a speciﬁc item in any NetObjects Fusion window or a 
control in a dialog or palette: 


✦ Right-click the object and then select What’s This? from the shortcut menu. 


✦ Click the question mark icon in the title bar of a dialog or palette, then click the 
item you want to learn about. 


In either case, an explanation of the item pops up. 


You can also highlight a menu command, then press F1 for an explanation, or if you 
are in Style view, select an element and press F1. 
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NetObjects Fusion Basics 
1 


NetObjects Fusion 7.5 incorporates new technologies with the current browser 
environment to help you meet today’s site building challenges. Using NetObjects 
Fusion you’ll ﬁnd it easy to build dynamic, content-rich sites that use the latest 
interactive technologies, including cascading style sheets and Dynamic HTML. 


This chapter introduces NetObjects Fusion, including information about: 


✦ NetObjects Fusion views 


✦ NetObjects Fusion window 


✦ Navigating in NetObjects Fusion 


✦ Choosing colors and working with color palettes 


✦ NetObjects Fusion folder structure 
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NetObjects Fusion Views 


NetObjects Fusion Views 


NetObjects Fusion provides views that correspond to the tasks you complete when 
you design and build a site. Changes you make in one view are reﬂected in the 
others. You can go to any view at any time by clicking a button on the control bar at 
the top of the NetObjects Fusion window. 


Online view 


✦ You see Online view when you start NetObjects Fusion (if you haven’t changed 
the settings on the Program tab of the Application Options dialog). Online view 
offers a variety of resources to help you build successful Web sites. It includes 
services you can integrate into your site, content you can incorporate on your 
pages, how-to information to enhance your site building experience, links to 
NetObjects and third-party resources, and much more. 


Site view 


✦ Start with Site view to create the hierarchical structure of a site or to import an 
existing site. You can see a structural map of the site, which is a graphic view 
that shows how the pages relate to each other, or an outline view similar to 
Windows Explorer. You can quickly rearrange your site by dragging and 
dropping pages and sections. See Chapter 3, “Creating and Managing Sites.” 


Page view 


✦ Use Page view to design pages and add content. In Page view you see the 
Layout area and MasterBorder of each page. The Layout area displays objects 
that are unique to that page. The MasterBorder contains objects that repeat on a 
set of pages, much as headers and footers appear in a word processing 
document. You can also preview the page as it will appear in a browser and view 
and edit the HTML source. See Chapter 6, “Page View Basics.” 


Style view 


✦ A SiteStyle consists of a variety of elements, including navigation buttons, 
banners, lines, and text. In Style view you can create your own SiteStyle, or 
choose from pre-built SiteStyles to give your entire site a consistent look and 
feel. See Chapter 17, “Using SiteStyles.” 


Assets view 


✦ Assets include the ﬁles, links, data objects, and variables that you reference in 
your site. Assets view gives you centralized control over all these referenced 
items. When you change an asset, NetObjects Fusion updates every reference to 
that asset throughout the site. See Chapter 29, “Managing Assets.” 


Site view 
is selected 
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Publish view 


✦ When you are ready to publish the completed site, go to Publish view to set up 
your server proﬁles and publish your site. See Chapter 30, “Publishing Your 
Site.” 


NetObjects Fusion Window 


When you start NetObjects Fusion and create a new blank site, you see a window 
containing a Home page icon, a Standard toolbar docked at the left side of the 
window, and a Properties palette. 


The title bar, menu bar, and control bar are at the top of the NetObjects Fusion 
window. The title bar shows the name of the current site. 


Title bar 
Menu bar 


Control bar 


Toolbar 


Page icon in Site view 


Properties palette 
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NetObjects Fusion Window 


About the Properties Palette 


When you click an object in Site, Page, or Style view, the properties palette changes 
to display the properties available for that object. Properties appear on tabs that also 
might change when the selected object changes. For example, when you select a 
text box in Page view, the Text Properties palette includes Text Box and Actions 
tabs. 


When you double-click in the text box to edit the text, the Format tab is added to the 
display. 


To shrink the properties palette to display just its title bar, double-click the title bar 
or click the minimize button; do the same thing again to restore the full display. To 
completely hide the properties palette, click its close box. To show the palette 
again, from the View menu, select Properties Palette. A check mark on the menu 
indicates the palette is displayed. 
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About Toolbars 


When you go to Site view, the Standard toolbar is docked at the left side of the Site 
view window. Additional toolbars are available in Page view. 


You can move a toolbar by positioning the pointer over the double line at its top and 
dragging it anywhere in the window. To dock the toolbar, double-click its title bar 
or drag it to the left side or top of the window. 


A small triangle in the lower right corner of a tool button indicates the tool is one of 
a group. To see the entire group, point to the tool and hold down the left mouse 
button. A ﬂyout containing the other tools in the group appears. As you move the 
pointer over each tool, a ScreenTip identiﬁes the tool group and the name of the 
speciﬁc tool. 


Draw tool ﬂyout 


To select a tool from a ﬂyout, position the pointer over the tool and release the 
mouse button. The tool you select is displayed on the toolbar. For example, if you 
point to the Draw tool on the Page view Standard toolbar and hold down the left 
mouse button, you can draw a rectangle, rounded rectangle, ellipse, polygon, or 
line. 


To hide and show toolbars, from the View menu choose Toolbars, Name of toolbar. 
A check mark on the menu indicates a toolbar is displayed. 


Using the Zoom Tools 


Zoom tools 


You can select the Zoom In or Zoom Out tool from the Standard toolbar in Site and 
Page views. The Zoom In tool is a magnifying glass with a plus sign; the Zoom Out 
tool has a minus sign. 


You can reverse the function of the current Zoom tool by holding down the Alt key. 
For example, if the selected Zoom tool is Zoom In, pressing Alt changes it to Zoom 
Out. When you release the Alt key, it becomes Zoom In again. 


Position the pointer here and drag to move the toolbar 


Triangle indicates tool is one of a group 
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Navigating in NetObjects Fusion 


Navigating in NetObjects Fusion 


NetObjects Fusion provides several navigation tools, including buttons on the 
control bar and the Go menu. 


Using the Control Bar Buttons 


You use the buttons on the control bar to move between views. See “NetObjects 
Fusion Views” on page 8. Some of the buttons in the middle of the control bar 
change depending on the view. For example, in Site view and Page view you see a 
New Page button and in Publish view you see a Publish Settings button. 


Preview Site 


To see how the site will appear in the browser you specify in the Application 
Options dialog, click the Preview Site button. 


Using the Go Menu 


The Go menu provides all the navigation features in one place and shows equivalent 
keyboard shortcuts. A dot to the left of a command indicates the current view. 


The Go menu commands vary slightly from view to view. 


✦ From all views you can go to any other view or the current view’s subviews. 
From Page view you can also go to other pages. 


Go menu presents 
navigation commands 
and keyboard navigation 
shortcuts 
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✦ Use the Go To command to ﬁnd any named object in your site. To search the 
entire site for any named NetObjects Fusion item (a page, layout, SiteStyle, data 
list, and so on), choose Go To from the Go menu. 


In the Go To dialog, enter the name, or partial name, of the item you want to 
locate, choose Begins with, Contains, or Ends with, and click OK. If only one 
object meets your criteria, NetObjects Fusion opens the appropriate view or 
dialog to display the object. If several objects meet your criteria, NetObjects 
Fusion lists them so you can pick one. 


✦ Use the Last command to go to the last page or view you were working on. 


✦ Use the Recent command to select from a list of the views and pages you 
displayed during the current session. 


✦ Use the Preview command to launch your browser and display a preview of 
your site. 


Using Shortcut Menus 


NetObjects Fusion provides shortcut menus you open by right-clicking an item. 
The menu lists the commands you can use on the selected item. In all views and in 
dialogs and properties palettes, you can right-click an item and select What’s This? 
from the shortcut menu to display a description of the item. 


Right-click a page icon 
in Site view to see this 
shortcut menu 
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Choosing Colors 


Choosing Colors 


In NetObjects Fusion, whenever the properties palette includes a Color button, you 
can change the color of the selected object. For example, you can change the color 
of the page icons or the background in Site view, objects in Page view, or button 
text color in Style view. 


To choose a color for a selected object: 


1. Click the Color button in any properties palette where it is offered. 


The Color Picker appears. 


The name of the current palette is shown above the color display. The last eight 
colors you selected from the palette are displayed in the Recent Colors boxes. 


2. Click the color you want to assign to the object. 


The Original and New boxes show the original color and the color you just 
selected. RGB and HTML hexadecimal values are also displayed. 


You might see a warning that the selected color is not Web safe. To avoid 
unexpected results for your site visitors, choose colors that are Web safe. 


3. Click OK. 


The new color appears in the selected object. 


Current palette 


Colors you used recently 
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Working with Color Palettes 


When you choose colors for the objects in your site, you select from the palette 
offered in the Color Picker. You can use the Browser Safe Palette, which contains 
colors that are Web safe, the system palette used by Windows, a palette you import 
from another application such as Adobe Photoshop, or a custom palette you create. 


Choosing a Color Palette 


1. Click the Color button in any properties palette where it is offered. 


The Color Picker appears. 


2. Select a palette from the drop-down list at the top of the dialog. If you choose 
Custom Palette and want to load an existing custom palette, see “Loading a 
Custom Color Palette.” To create your own custom palette, see “Creating or 
Editing a Color Palette.” 


The palette is displayed in the Color Picker until you change it. 


3. Click OK. 


Loading a Custom Color Palette 


1. Click the Color button in any properties palette where it is offered. 


The Color Picker appears. 


2. Select Custom Palette from the drop-down list at the top of the dialog. 


An all white palette appears. 


3. Click Load. 


4. In the Open dialog, navigate to the palette you want to use, then click Open. 


This palette is displayed in the Color Picker until you change it. 


5. Click OK to close the Color Picker. 
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NetObjects Fusion Folder Structure 


Creating or Editing a Color Palette 


1. Click the Color button in any properties palette where it is offered. 


The Color Picker appears. 


2. Select Custom Palette from the drop-down list at the top of the dialog. 


An all white palette appears. 


3. Click a box in the palette area. 


4. Set the RGB values for the color you want to add to the palette, type the 
hexadecimal (HTML) value for the color, or double-click the blank box and 
choose or create a color in the Color dialog. 


5. Repeat steps 3 and 4 for each color you want to add to the palette. 


6. Click Save. 


7. In the Save As dialog, type a ﬁle name for the palette and click Save. 


The new palette is displayed in the Color Picker until you change it. 


NetObjects Fusion Folder Structure 


The NetObjects Fusion 7.5 folder contains all the ﬁles you need to use NetObjects 
Fusion. 


Do not move or rename the NetObjects Fusion 7.5 folder or any folders within it. If 
you need to relocate the NetObjects Fusion folder, you must uninstall and reinstall 
the program. NetObjects Fusion performs best when the application and its parts 
remain in the folder recommended during installation. This is especially true with 
the \User Sites folder. Since NetObjects Fusion keeps track of assets and links, 
folder names and locations are very important. If you change names and/or 
locations using Windows Explorer or File Manager, NetObjects Fusion might not 
be able to track assets and links properly. 


The subfolders organize ﬁles according to their use: 


✦ 
\Components contains the NetObjects Fusion Components, mini-applications 
that can add sophisticated functions to your site. See Chapter 26, “Using 
NetObjects Fusion Components.” 


✦ 
\FSI Updater contains ﬁles required to auto update NetObjects Fusion. 


✦ 
\Java contains Java applets and beans. 
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✦ 
\NetObjects System contains ﬁles used by the program; do not delete or remove 
these ﬁles. 


Note: User proﬁles are stored in the NetObjects System folder. This folder contains 
information such as user proﬁle, output settings and site preferences. A 
unique proﬁle is created for each account set up to use that workstation. 


✦ 
\QuickStart contains ﬁles used to display basic NetObjects Fusion concepts 
when you choose NetObjects Fusion QuickStart Tips from the Help menu, plus 
ﬁles for the View tips and the Site wizard. 


✦ 
\ReadMe contains important information about this version of NetObjects 
Fusion. 


✦ 
\Sample Sites contains one site that demonstrates NetObjects Fusion 7.5 features. 


✦ 
\Styles contains a separate folder for each local SiteStyle, including the ones you 
create. See Chapter 17, “Using SiteStyles.” 


✦ 
\Templates contains the AutoSites™ folder, which contains the Blank Site and 
Import templates that you use to create a new site or to import a site. See 
Chapter 4, “Working with Templates.” 


Warning: Do not delete or move the AutoSites folder. This folder contains ﬁles 
necessary for NetObjects Fusion to run correctly. 


✦ 
\Tutorial contains the assets you need for the lessons in NetObjects Fusion 
Getting Started. 


✦ 
\User Sites contains all the sites you create. For each site, NetObjects Fusion 
automatically creates a subfolder within \User Sites to keep your projects 
organized. Each NetObjects Fusion site is saved with a .nod extension. The site 
folder also includes an \Assets folder where the assets originally included in the 
site template are saved, a \Styles folder where all active SiteStyles associated 
with the .nod are located, a \Preview folder where HTML sufﬁcient for 
previewing but not for publishing is stored, and a \Backups folder where backup 
.nod ﬁles are saved. After you publish the site, a \Local Publish folder is added. 
You can also save sites in other locations. 
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NetObjects Fusion Folder Structure 
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Setting Application Options 2 


Application option settings affect all sites you work on in NetObjects Fusion. You 
can change settings from any view by choosing Options>Application from the 
Tools menu. Changes take place as soon as you click OK to close the Application 
Options dialog. 


This chapter explains how to set: 


✦ Program options 


✦ Preview options 


✦ Text options 


✦ International options 


✦ Update options 


For information about site-speciﬁc options, see “Setting Options for the Current 
Site” on page 52. 
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Setting Program Options 


Setting Program Options 


➲ From the Tools menu, choose Options>Application. 


The Program tab of the Application Options dialog appears. 


✦ 
Auto save. When this option is selected, your site is saved each time you change 
views or pages and when you close NetObjects Fusion. If you clear the Auto 
save check box, be sure to save your site periodically by choosing Save Site 
from the File menu. 


✦ 
Application window maximized at startup. If you clear the check box for this 
option, the NetObjects Fusion window opens in the last size you set, rather than 
full screen size. 


✦ 
Open to most recently used ﬁle at startup. When this option is selected, the last site 
you worked on opens automatically when you start NetObjects Fusion. If Open 
to most recent view is also selected, the site is displayed in the last view you 
worked in. If this option or Open to most recent view is cleared, you see Online 
view when you start NetObjects Fusion. If you switch to another view before 
opening a site, you see View tips. 


✦ 
Open ﬁle to most recent view. If this option is selected, when you open a site, it is 
displayed in the last view you worked in. 


NOF7.5UG~1.BOO Page 20 Thursday, January 21, 1904 11:14 PM 


Chapter 2 
Setting Application Options 


21 


✦ 
Use small fonts in properties palette. If you clear this check box, you see larger 
properties palettes in Page view. To maximize the area available for your page 
Layout, leave this option selected. 


✦ 
Compact database upon exit. This option is selected by default. Compacting the 
ﬁles can save you substantial hard disk space. In addition, when this option is 
selected, NetObjects Fusion performs an error-checking procedure to verify 
your database as it compacts the ﬁles. It is recommended that you do not change 
this setting. 


Warning: Do not shut down Windows while the ﬁle is being compacted. This could 
cause your .nod ﬁle to become unstable. 


✦ 
External ﬁle editors. You can select default applications for editing .html, .gif, and 
.jpg ﬁles from within NetObjects Fusion. You launch the default HTML editor 
by right-clicking the external HTML’s icon in Page view and selecting Open 
File In External Editor from the shortcut menu. You launch the default image 
editor by right-clicking the image in Page view or Style view or the image name 
in Assets view, and selecting Open File In External Editor from the shortcut 
menu. To choose an external ﬁle editor, click Browse and ﬁnd the ﬁle that 
launches the application. 


✦ 
Measurement units. Choose the measurement unit you want to use as you build 
your site. Choose pixels for the most consistent results independent of monitor 
resolution. 
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Setting Preview Options 


➲ From the Tools menu, choose Options>Application and click the Preview tab. 


✦ 
Select previewing default. When you install NetObjects Fusion, it lists the 
browsers installed on your system. If installed browsers are not listed, you can 
add them to the list. Choose the Web browser you want to use for previewing 
sites by selecting its check box. To change the browser used for previewing, 
return to this dialog and choose a different browser. 


To add a browser to the list, click Add. In the New Browser dialog, type a name 
for the browser, browse to the shortcut or .exe ﬁle that launches it, and click OK. 


To remove a browser from the list, select it in the list and click Remove. 


To change a browser’s name or location, select the browser in the list and click 
Edit. Enter the new information and click OK. 


✦ 
Preview scope. Choose whether you want to preview only the current page or the 
entire site you are working on when you click the Preview Site button on the 
control bar. Previewing the entire site takes longer, but you can move from page 
to page in the browser to test the site’s navigation buttons. Select the Current 
page option to preview only the current page. When you select Current page, 
links to other pages are disabled. You can also preview the current page by 
clicking the Page Preview tab in Page view. 


Installed browsers 
are shown here 
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You can use keyboard shortcuts to preview either the whole site or just the 
current page or section: 


✧ If Entire site is selected in the Applications Options dialog, pressing Alt+P 
or clicking the Preview Site button previews the entire site; pressing 
Ctrl+Alt+P or clicking the Preview Site button while pressing Ctrl previews 
just the current page. 


✧ If Current page is selected in the Options dialog, pressing Alt+P or clicking 
the Preview Site button previews the current page; pressing Ctrl+Alt+P or 
clicking the Preview Site button while pressing Ctrl previews the entire site. 


✦ 
Window size. Select the window size or resolution most appropriate for your site 
visitor’s monitors. This opens a preview window sized to the resolution you 
select so you can see how site visitors will view your site. 


Setting Text Options 


➲ From the Tools menu, choose Options>Application and click the Text tab. 


✦ 
Browser font settings. To ensure that your pages appear in your browser the way 
you design them in NetObjects Fusion, choose the same font settings in your 
browser that you use in your site. For example, if you use Times New Roman, 
size 12, and Courier New, size 10, for your browser proportional and ﬁxed 
width fonts, choose the same fonts and sizes in NetObjects Fusion. The 
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Setting Text Options 


suggested settings are the defaults used by Microsoft Internet Explorer and 
Netscape Navigator when they are installed. 


These settings do not change the actual font in the HTML generated by 
NetObjects Fusion; they only mimic the effect of a font change. To change the 
font, see “Modifying a Text Style” on page 167. 


NetObjects Fusion sizes text boxes based on the expected font size, so when 
you change sizes, you change the Layout of the page slightly. 


✦ 
Automatically select entire word. If this option is selected, when you start to drag 
the mouse pointer over a word, NetObjects Fusion automatically selects the 
entire word and the space after it. 


✦ 
Smart spell check. If this option is selected, after NetObjects Fusion checks 
spelling of a text block, it does not check the same text again unless you modify 
the text or clear this option. 


✦ 
Check spelling as you type. If this option is selected, NetObjects Fusion will check 
the text as you type, and then mark possible errors with wavy underlines. To 
make a correction, right-click on the word and select the correction you want. 


✦ 
Display report message. If this option is selected, after NetObjects Fusion spell 
checks the page or site, you will see the number of corrections made. If you ﬁnd 
this option unnecessary, you can check the “Don’t display again” box after 
spell-checking your page. 
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Setting International Options 


➲ From the Tools menu, choose Options>Application and click the International 
tab. 


✦ 
Date, time, and decimal formats. The date, time, and decimal formats you select 
affect how these items are displayed wherever they appear in NetObjects 
Fusion; for example, the last published date of items in Publish view. These 
settings do not affect generated HTML or text you enter on Web pages. 


Select a format from the Date/time drop-down list. A sample of the format is 
shown next to each language. To determine the decimal point character, select a 
format from the Decimal drop-down list. If you choose Use System Setting for 
either option, NetObjects Fusion uses the setting in the Windows Regional 
Settings Properties dialog. 


✦ 
Spelling dictionary. Select the dictionary you want to use when checking spelling. 


✦ 
Sort order. Character variations between languages result in variations in sorting 
priorities. To ensure that items in Assets view and Publish view are sorted 
correctly, you can choose the appropriate sort order. This affects only how the 
items are displayed in NetObjects Fusion; it does not affect the generated 
HTML. If you choose Use System Setting, NetObjects Fusion uses the current 
system sort setting. 
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Setting International Options 


✦ 
Imported text uses character set. Choose the character set you want to apply to text 
in imported sites. For information about character sets, see “Working with 
Character Sets” on page 521. 
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Updating NetObjects Fusion 


➲ From the Tools menu, choose Options>Application and click the Updates tab. 


Set your preferences for checking for online program updates. Select 
Automatically to check for updates using the frequency and event you specify, or 
Manually to check only when you select Check for Updates from the Tools 
menu. Automatically is the default setting. 


If you select Automatically: 


✦ Select an update frequency of Daily, Weekly, or Monthly. 


✦ Choose when you want to check for updates. Select: 


✧ 
Launches to search for updates each time you start NetObjects Fusion. 


✧ 
Connects to the Internet to search for updates when you connect to the 
Internet while using NetObjects Fusion. This is the default setting. 
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Updating NetObjects Fusion 
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Creating and Managing Sites 3 


Site view is where you create, view, and maintain the architecture of your site. Site 
view frees you from the details of ﬁle and link management, so you can focus on 
organizing and updating your site. For example, you can drag a page or section to 
any location in Site view, and NetObjects Fusion updates the links to other pages 
automatically. 


This chapter describes Site view and its automated site-building capabilities, 
including: 


✦ Starting NetObjects Fusion 


✦ Starting with a blank site 


✦ Opening an existing site 


✦ Working with the SiteStructure 


✦ Selecting pages 


✦ Setting page properties 


✦ Adding, copying, deleting, and moving pages 


✦ Renaming pages 


✦ Assigning custom names 


✦ Working with the site outline 


✦ Printing the SiteStructure 


✦ Saving and backing up your site 


✦ Changing site settings 
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Starting NetObjects Fusion 


Starting NetObjects Fusion 


When you install NetObjects Fusion, it is added to your Windows Start menu. 


1. From the Start menu, choose Programs>NetObjects>NetObjects Fusion 7.5. 


2. Follow the onscreen instructions to conﬁgure your system, or skip this for now 
and continue. 


3. You can use the Site wizard to create a site or go directly to NetObjects Fusion 
Online view. 


✧ If you choose the Site wizard, follow the onscreen instructions to create your 
site. 


✧ To create a blank site or open an existing site, see “Creating and Opening 
Sites” on page 31. 


✧ To create a new site based on a NetObjects Fusion template ﬁle, see 
Chapter 4, “Working with Templates.” 


✧ To create a site from an existing Web site, see Chapter 5, “Importing Sites 
and Documents.” 


After the ﬁrst launch, you can set Application Options so NetObjects Fusion 
automatically opens the last site you worked on in the last view you used. See 
“Setting Program Options” on page 20. 


Working with Site Files 


A NetObjects Fusion site ﬁle is a relational database of information about your site. 
Site ﬁles have a .nod extension. 


Site ﬁles are stored in a folder that has the same name you give the site. For 
example, if you name the site MySite, the site’s folder is called MySite, and the site 
ﬁle—MySite.nod—is saved inside the folder. The site folder contains an \Assets 
folder with the asset ﬁles used in the site, a \Styles folder with active SiteStyles and 
a \Backups folder. Once you preview the site, a \Preview folder is added, and when 
you publish the site locally, a \Local Publish folder is added as long as you do not 
change the default local publish location. 


By default your site folder is saved inside the \User Sites folder, but you can store the 
site in any location on your local computer. Because the paths to the assets in a site 
ﬁle are absolute—they include the drive and folder names—you cannot save the 
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site ﬁle on another computer on a network. To move a site to another computer, you 
must export the site as a template, as described in Chapter 4, “Working with 
Templates.” 


It’s a good idea to check the size of your .nod ﬁles periodically. Some site designs 
may cause a sudden increase in the size of the .nod ﬁle. If this happens, choose 
Re-optimize from the Tools menu. This command can increase the efﬁciency of the 
open site ﬁle. For additional assistance, contact NetObjects Technical Support. 


Creating and Opening Sites 


When you create a site, you always begin with a template. You can also derive 
templates from sites you create. 


A template is a fully designed page or site that you can use as a starting point for 
your own pages or sites. A typical template might include a banner and navigation 
buttons, an assigned SiteStyle, and text or other content. You can start a new site 
from a template or insert one into your current site. Once inserted into a site, you 
can modify template pages any way you like. Templates are described in detail in 
Chapter 4, “Working with Templates.” 


You can also open an existing site and add to it, change its style, or modify it. 


Starting with a Blank Site 


You can build a new site from a blank site, which is a template that consists of a 
Home page with a banner and navigation buttons. 


To start with a blank site: 


1. From the File menu, choose New Site>Blank Site. 


The New Blank Site dialog appears. 
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Creating and Opening Sites 


2. Enter a site name in the dialog. 


3. Click Save. 


Site view opens and displays a Home page. You can begin developing the 
SiteStructure, as described on page 43. 
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Starting with the Site Wizard 


You can also start a new site using the Site wizard. 


1. In Site view, from the File menu, choose New Site>Using Site Wizard. 


The introductory Site wizard dialog appears. 


2. Follow the onscreen instructions to build your site. 


Opening an Existing Site 


1. From the File menu, choose Open Site. 


The Open dialog appears. 


2. Open the folder that contains the site you want to open. 


3. Select the site’s .nod ﬁle and click Open. 


You can also open an existing site by: 


✦ Choosing it from the list of recently used ﬁles on the File menu. 


✦ Choosing it from the list of sites in Online view. 


✦ Double-clicking the .nod ﬁle in Windows Explorer. 


✦ Dragging the .nod ﬁle from Windows Explorer to the NetObjects Fusion 
window. 
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Working with the SiteStructure 


Working with the SiteStructure 


In Site view, the structure of your site is represented by page icons. As in a family 
tree, pages have parent, child, and sibling relationships. 


In Site view you can add pages to the site, rename pages, move them, copy them, 
delete them, and complete other site-oriented actions. To add content to a particular 
page—for example, to add text or pictures—use Page view. As you construct a site, 
you typically go back and forth between Site view and Page view. 


Selecting a Page 


Before you can add, copy, rename, or move pages, or set page properties, you must 
select a page. By selecting a page, you identify it as the one you will work with. 
NetObjects Fusion places a blue border around the selected page. 


The pages named Mission, Events, 
Next Tour, and Contest are children of 
the Home page and siblings of each 
other. The Events page is the parent of 
Activities and Highlights and the 
Contest page is the parent of Wonder 
Lodge 


Selected page has a 
blue border 
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To select a page: 


✦ Click the Selection tool on the toolbar and then click the icon for the page you 
want to select. Don’t click the page’s name unless you want to rename the page. 


✦ Press the arrow keys to select the current page’s parent, child, or sibling pages. 


Working with a Group of Pages 


In addition to selecting individual pages, you can select several pages and change 
their properties. You can select any combination of noncontiguous pages or you can 
select a section of your site, which is any page and all its children, their children, 
and so on. 


To select noncontiguous pages: 


1. Click the ﬁrst page to select it. 


2. Shift+Click additional pages to select them. 


NetObjects Fusion places a border around each selected page and lists the pages 
on the Selected Pages tab of the Properties palette. 


To select a section: 


1. Click the parent page of the section. 


2. Shift+Click the parent page of the section. 
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Setting Properties 


NetObjects Fusion places a border around each page in the section and lists the 
pages on the Selected Pages tab of the Properties palette. 


Sections are not permanent entities. You can deselect the section by clicking any 
page in the site, or by clicking the Site view background. 


Setting Properties 


Pages have properties. Some properties affect the published site; others are for your 
information only. For example, you can assign colors to the page icons to create 
visual groups that indicate which pages are ﬁnished or which are assigned to a 
particular designer. You can instruct NetObjects Fusion not to publish a particular 
page, note if a page is done, and enter comments about the selected page. And you 
can use META tags to include information about speciﬁc pages on each site. 
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Setting Page Properties 


You set the following properties on the Page tab of the Properties palette: 


✦ 
Page name. Name assigned to the page that is used on the page icon in Site view 
and the banners and navigation bar buttons generated by NetObjects Fusion. 
See “Renaming Pages” on page 46. 


✦ 
Page title. Text that appears in the title bar of the browser window when it 
displays this page. When site visitors bookmark this page, the page title is used. 
The title is also emphasized in search engine queries. 


✦ 
Custom Names. See “Using Custom Button and Banner Names and File 
Extensions” on page 47. 


✦ 
Page type. Shows whether the page is a normal page or a stacked page. You 
cannot change this setting; it is determined by how the page was created. For 
information about stacked pages, see Chapter 27, “Data Publishing.” 


✦ 
MasterBorder. Shows the MasterBorder assigned to the page. You can change the 
MasterBorder by selecting from the drop-down list. 
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Setting Site Management Properties 


Click the Management tab to set the following properties: 


✦ 
Done. Page icon displays a check mark when you select Done. This is a 
convenient way to manage individual pages in a large site. This setting has no 
effect on the functioning of the site. 


✦ 
Don’t publish. Makes it possible to publish some pages while not publishing 
others that might be under construction or private. The page icon displays a red 
indicator when you select Don’t publish. 


NetObjects Fusion removes pages marked Don’t publish from the navigation 
bars of other pages in the site, disables manually created links to such pages, 
and does not generate HTML for these pages during publishing. However, you 
can preview a page that is designated Don’t publish as an individual page. 


Do not use the Don't publish setting in an attempt to publish only changed pages 
to an already-published site. Doing so causes broken links and other undesirable 
results. Instead, you can publish a section of the site to update it. See 
Chapter 30, “Publishing Your Site.” 


✦ 
Color code. You can set the color of page icons in Site view to highlight a group 
of selected pages or pages that share the same MasterBorder. A page icon’s 
color has no effect on the published site. You can display either a user-deﬁned or 
MasterBorder color by opening the View menu, choosing Page Color Coding, 
and then choosing User Deﬁned or MasterBorder. You select the colors to be 
displayed on the Management tab of the Properties palette. 
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On the Management tab of the Properties palette, click the: 


✧ 
User deﬁned Color button to choose a color for the currently selected page or 
pages. 


✧ 
MasterBorder Color button to choose a color for pages that have the same 
MasterBorder as the currently selected page. This option is not available if 
multiple pages are selected. 


For example, select a page and choose blue as the MasterBorder color and red 
as the user-deﬁned color. From the View menu, choose Page Color 
Coding>MasterBorder. The icons representing all pages that share the 
MasterBorder of the selected page turn blue. If you create a new page and 
assign the same MasterBorder, that page icon is also blue. Return to the View 
menu and choose Page Color Coding, User Deﬁned. The icon of the originally 
selected page now turns red and the other page icons return to the default color. 


✦ 
Comments. Enter notes about the status or content of individual pages. This 
option is not available if multiple pages are selected. 


Setting META Tag Properties 


You can use META tags to include information about a site within the <HEAD> tag 
of each page in the site. For example, you might want to include keywords to 
promote your site with the various search engines, the site author’s name, or 
copyright information. Site visitors do not see information included in a META tag. 


You can set META tag properties at the page level or at the site level. To add 
general META tags that will be applied to all pages in your site, See “Entering 
META Tags” on page 53 


To set META tags on a single page: 


1. In Site view, select the page you want to work with. 


2. Click the META tag tab. 
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Setting Properties 



3. Select a META tag from the drop-down list. You can select: 


✦ Abstract to provide a brief summary or abstract of your Web page. 


✦ Author to declare the author of the Web page. 


✦ Date to declare the date your Web page was created. 


✦ Description to provide a general description of the contents of your Web 
page. 


✦ Generator to declare the tool used to build your Web page. 


✦ Keywords to list a series of keywords representing the content of your site. 


✦ Language to declare the language used on your Web page. 


✦ Organization to declare an organization associated with your Web page. 


✦ Public to declare if the Web page is available for public viewing. 


✦ Rating to declare the content level of your Web page to screen out 
inappropriate viewers. 


✦ Refresh to declare the number of seconds before your Web page is 
refreshed. 


✦ Revisit-After to declare the number of days a search engine should revisit 
your Web page. 


✦ Robots to declare to search engines what content on your Web page to index 
and spider. 


4. Click on the text ﬁeld and enter your content. 
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5. To apply the same META tag to some or all of your Web pages: 


✦ Enter a META tag to the Home page, then select “Apply META tags to all 
pages” on the META tag tab. The META tag will appear on all page. 


✦ Enter a META tag to a page other than the Home page, then select “Inherit 
META tags from parent” from the META tag tab. The META tag will 
appear on all child pages of the parent page. 


If you make changes to META tags on the child page, the inherited META tags 
will no longer apply. 


6. Repeat the process for one or all of the available META tags. 


Warning: Adding META tags to a page in Site view will overwrite any existing keywords 
entered using the Site Options dialog. See “Entering META Tags” on page 53 


Setting Properties for a Group of Pages 


When multiple pages are selected, you set properties on the Selected Pages tab of 
the Properties palette. You can change the properties for all selected pages or for a 
single page. 


1. In Site view, select the pages you want to work with. See “Working with a 
Group of Pages” on page 35. 
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Setting Properties 


2. Choose a property from the top drop-down list. You can select: 


✦ 
MasterBorder to change the MasterBorder applied to the selected page or 
pages. 


✦ 
Page name to change the name of the page in Site view and the default names 
on the page’s banner and navigation button. 


✦ 
Title to change the text displayed in the title bar of the site visitor’s browser 
and bookmark list. 


✦ 
Navigation button to change the text displayed on the button in the navigation 
bar that links to the selected page. 


✦ 
Banner to change the text displayed on the selected page’s banner. 


✦ 
File extension. See “Using Custom Button and Banner Names and File 
Extensions” on page 47. 


3. Select a property value from the drop-down list, or type a value into the ﬁeld. 


4. To apply the new value to all selected pages, click Set on all. 


The new value is displayed in the list at the bottom of the palette. 


You can also set Management properties for multiple pages. See “Setting Site 
Management Properties” on page 38. 
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Adding a Page 


1. In Site view, select the page you want to be the parent of the new page. 


New Page 


2. Click the New Page button on the control bar. 


In Site view, the new page appears beneath the selected page. The new page is 
named Untitled followed by a number, which indicates the order in which new 
pages were added. 


Note: Site visitors may not be able to get to the new page unless navigation is set 
up in the MasterBorder of the parent page to include the child page. It is also 
a good idea to set the navigation on the child page to include its parent so 
site visitors can get back to the previous page. 


Copying and Pasting Pages 


You can copy pages in Site view and paste them anywhere in the SiteStructure. 


1. Select the page or pages you want to copy and press Ctrl+C. 


2. Select the page to be the parent of the copied pages and press Ctrl+V. 


The copies are pasted into the SiteStructure as children of the selected page. 
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Deleting a Page 


Deleting a Page 


1. In Site view, select the page or pages you want to delete, right-click the page 
icon, and choose Delete Page from the shortcut menu. 


2. Click Yes to conﬁrm the deletion. 


If you delete a page that has children, the child pages move up to the level of the 
deleted page. 


Note: Deleting a page cannot be undone. You cannot delete the Home page. 


Moving a Page 


When you move pages in Site view, NetObjects Fusion updates all affected links 
within the site. If you move a page that has children, the pages retain their 
relationship. 


1. In Site view, select the page or section you want to move. You cannot move the 
Home page or noncontiguous pages. 


2. Drag the page to the target page, where it becomes a sibling, a child, or a parent 
in its new location. 


As you drag the page, a colored outline highlights the target page. A triangle to 
the left or right of the target page’s border indicates the moved page will be a 
sibling; a triangle below the target page’s border indicates the moved page will 
be a child; and a triangle above the target page’s border indicates the moved 
page will be a parent. 


A triangle on the side of the target page 
icon shows that the moved page will be a 
sibling 


A triangle on the bottom of the target 
page icon shows that the moved page 
will be a child 


A triangle above the target page icon 
shows that the moved page will be a 
parent 


NOF7.5UG~1.BOO Page 44 Thursday, January 21, 1904 11:14 PM 


Chapter 3 
Creating and Managing Sites 


45 


If you want to move a page so it will be the child of a page that already has 
children, target the sibling page. 


You can cut and paste to move noncontiguous pages. 


Replacing the Home Page 


You cannot move the Home page, but you can move a page to be the parent of the 
Home page. 


1. In Site view, select the page you want to become the new Home page. 


2. Drag the page to the Home page until you see the colored triangle above the 
Home page. 


When you release the mouse button, the new page becomes the parent of the Home 
page. 


Select the Mission page and drag it 
above the Home page. The Mission page 
becomes the new Home page. 
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Renaming Pages 


If you move a page that has children to be the parent of the Home page, the Home 
page becomes the sibling of the child pages. 


Renaming Pages 


By default, NetObjects Fusion uses the page name on banners and navigation 
buttons that identify the page. When you publish your site, NetObjects Fusion uses 
the page name as the HTML ﬁle name for the page. It also uses the page name 
when it creates links to the page. 


NetObjects Fusion converts spaces and non-alphanumeric characters except periods 
(.) and hyphens (-) in the page name to underscores (_) in the HTML ﬁle name. 


If you give two pages the same name and they are published in the same folder, 
NetObjects Fusion adds a numeral to the ﬁle name when it generates the HTML 
ﬁles for the second and any additional pages. For example, if you have two pages 
named Great, NetObjects Fusion creates Great.html and Great1.html. This only 
affects the page names in Publish view. 


You can change the name directly on the page icon or in the Page name ﬁeld on the 
Page tab of the Properties palette. 


To rename a page on the page icon: 


1. In Site view, click the page name text and type a new name. 


2. Press Enter or click outside the page icon to enter the name. 


The Activities and Highlights 
pages are children of the 
Events page. When you move 
the Events page into the Home 
page position, the children of 
the Events page become 
siblings of the original Home 
page. 
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Once in this edit mode, you can tab between sibling pages to edit their names. 
NetObjects Fusion remains in edit mode until you press Enter. If a page has no 
siblings, pressing Tab moves the text edit selection to the page’s parent. 


To rename a page on the Properties palette: 


1. Select the page you want to rename. 


2. Edit the text in the Page name ﬁeld on the Page tab of the Properties palette. 


3. Press Tab or click outside the palette to enter the new name. 


If several pages are selected, you can change the page name on the Selected Pages 
tab of the Properties palette. See “Setting Properties for a Group of Pages” on 
page 41. 


Using Custom Button and Banner Names and File Extensions 


By default, banners and navigation buttons use the page name. If you prefer, you 
can specify different names. If you have a long page name, you can break it into 
two lines. 


To specify custom page names in Site view: 


1. Select the page you want to work with. 


2. On the Page tab of the Properties palette, click the Custom Names button. 


3. In the Custom Names dialog, type the custom names you want to use. 


✦ 
Navigation button. Appears on navigation buttons leading to this page. To 
add a second line of text, press Enter after the ﬁrst line. 


✦ 
Banner. Appears in the page’s banner. To add a second line of text, press 
Enter after the ﬁrst line. 
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Setting Up the Site View Display 


✦ 
File extension. Page ﬁles usually have an .htm or .html extension. A page 
sometimes requires a different extension to function with speciﬁc server 
software. For example, pages for secure locations use the extension .shtml. 


The extension you choose for this page overrides the extension you specify 
in Publish view. See “Setting Up to Publish Locally” on page 488. 


4. When you ﬁnish entering names, click OK. 


You can also rename buttons and banners in Page view using the object’s Properties 
palette. See “Change a Button’s Name” on page 274 and “Changing the Banner 
Text” on page 279. 


Setting Up the Site View Display 


You use options on the View menu in Site view to set up your Site view display. 


You can change the Site view orientation and background color and color code the 
page icons. These settings are strictly for working in Site view. They have no effect 
on the published site. 


✦ To change orientation, from the View menu, choose Orientation and then choose 
Vertical or Horizontal. 


✦ To change background color, from the View menu, choose Background Color 
and select a new color from the Color Picker. 


✦ To set up page icon color codes, see “Setting Site Management Properties” on 
page 38. 


Collapsing the SiteStructure Display 


By collapsing the display of the SiteStructure, you hide the child pages of a 
selected page, displaying only the page icons you want to see. A page with hidden 
child pages displays a plus symbol beneath its icon. 
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To collapse the display of child pages, click the triangle beneath the parent’s page 
icon. To expand the display to see child pages again, click the plus sign. 


You can also collapse the display by selecting a parent page and pressing Tab. To 
expand the display, press Tab again. 


The Structure and Outline views display the same expanded and collapsed pages. If 
you change the child pages hidden and shown in one view, the other view reﬂects 
your changes. 


Working in Site Outline View 


Site Outline view displays the SiteStructure in outline format, including a table of 
the properties—child name, page type, status, publishing status, and comments—of 
the child pages of the currently selected page. If the selected page has no children, 
the table describes the selected page itself. 


To switch to Outline view: 


➲ In Site view, click the Outline tab. 


Click here to collapse 
the SiteStructure 


Click here to expand 
the SiteStructure 


Click the minus sign 
to collapse this 
branch of the site 


This branch of the site is 
collapsed. Click the plus 
sign to expand it 
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Printing the SiteStructure 


Like SiteStructure view, Site Outline view shows if a branch of the site is collapsed. 
A collapsed branch is indicated by a plus sign to the left of the page icon; an 
expanded branch is indicated by a minus sign. 


✦ To expand a branch, click the plus sign to the left of a page. 


✦ To collapse a branch, click the minus sign to the left of a page. 


In Outline view you can sort the child pages by their properties so you can quickly 
identify pages with common characteristics. 


➲ Click the heading of the column you want to use to sort the list. 


NetObjects Fusion sorts the list in ascending (A-Z) order. To sort the list in 
descending (Z-A) order, point to the column heading and press Shift+Click. 


Printing the SiteStructure 


In Site view, you use the Print command on the File menu to print the SiteStructure 
view of your site or of a section. You cannot print the Site Outline view. The printed 
structure shows the same magniﬁcation, colors, orientation, and expanded or 
collapsed child pages that you see on the screen. The printout shows the site name 
in the header and the number of site pages in the footer. 


✦ To print the entire site, select the Home page, or click All in the Print dialog. 


✦ To print a speciﬁc page and its children, select the top-level page or a section, or 
click Selected page and its children in the Print dialog. 


✦ To view what will be printed, select Print Preview from the File menu. Select 
Close to return to Site view. 


✦ To ﬁt a large site on a single page, from the File menu, choose Print Setup and 
select the Print to ﬁt option in the Print Setup dialog. 


Saving Your Work 


To save your work, choose Save Site from the File menu. NetObjects Fusion also 
has an auto save feature that saves your work each time you change views. See 
“Setting Program Options” on page 20. 
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Backing Up Your Site 


You can back up your site manually or automatically. 


To make a manual backup: 


1. From the File menu, choose Save Site As. 


The Save Site As dialog appears. 


2. Type a descriptive name for your backup ﬁle and select a location. 


3. Click Save. 


NetObjects Fusion creates a copy of the .nod ﬁle in the location you speciﬁed and 
automatically opens that ﬁle. 


Note: The backup you make with the Save Site As command does not collect all assets and 
make all links relative. Your backup will still refer to assets and components in the 
original site ﬁle folder. To make a backup with assets and relative links, export your site 
ﬁle as a template, as described in Chapter 4, “Working with Templates.” 


For information on automatic site ﬁle backups, see “Setting Backup Preferences” 
on page 56. 
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Setting Options for the Current Site 


Setting Options for the Current Site 


Site options help you manage your site. You can change these settings from any 
view. Changes take place as soon as you click OK to close the Current Site Options 
dialog. 


These options apply only to the current site. To set options that apply to all sites, see 
Chapter 2, “Setting Application Options.” 


Changing General Settings 


➲ From the Tools menu, choose Options>Current Site. 


The General tab of the Current Site Options dialog appears. 


✦ 
Site name. The name assigned to this site when it was created. You cannot 
change this setting. 


✦ 
SiteStyle. The style currently assigned to this site. To change the SiteStyle, go to 
Style view. See Chapter 17, “Using SiteStyles.” 


✦ 
Number of pages. Pages currently in this site. This setting is updated when you 
add or delete pages. 


✦ 
Browser compatibility. HTML output method setting for the site. See Chapter 7, 
“Controlling Published Output.” 
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✦ 
New page size. Default width and height for pages you add to the site. Changing 
this setting does not change the size of existing pages in the site. 


✦ 
Character set. You can choose a character set from the drop-down list. See 
“Setting the Site’s Character Set” on page 523. 


✦ 
Text formatting. You can choose HTML or cascading style sheets (CSS). See 
“Selecting HTML or Cascading Style Sheet Text Formatting” on page 148. 


✦ 
Quote type. Select Straight or Curly quotes for the site’s text objects. 


✦ 
HTML Options. Click this button to deﬁne characteristics of the HTML generated 
when you publish your site. See “Setting HTML Options” on page 489. 


✦ Variable Options. Click this button to enable variable substitution. You can add 
a preﬁx and sufﬁix to NetObjects Fusion’s syntax that will not conﬂict with 
your custom-deﬁned variables. 


Entering META Tags 


When you enter META tags on this tab, the tags are inserted in the <HEAD> tag of 
every page of your site. To limit this information to a speciﬁc page, you can enter 
the HTML directly. See “Indexing Pages for Search Engines” on page 457. 
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Setting Options for the Current Site 


➲ From the Tools menu, choose Options>Current Site and click the META tags 
tab. 


✦ 
Keywords. Type a series of keywords separated by commas. For example, if your 
site features mountain sports, you might type words such as skiing, rock 
climbing, mountain biking, and so on. These keywords are added to the META 
tag in each page’s HTML ﬁle on every page of the site. Search engines use these 
keywords to index your site. 


For example, if you type skiing, rock climbing, mountain biking, the META tag 
generated and placed between the <HEAD> and </HEAD> tags of the page is: 
<META NAME=“keywords” CONTENT=“skiing, rock climbing, mountain biking”> 


✦ 
Author. Enter a name to be included in the META tag in each page’s HTML ﬁle 
header. For example, if you type Jesse Jones, the META tag generated and 
placed between the <HEAD> and </HEAD> tags of the page is: <META 
NAME=“author” CONTENT=“Jesse Jones”> 


✦ 
User deﬁned. Use the Category name and Content ﬁelds to enter standard META 
NAME information that is recognized by search engines, or to enter information 
for your own use. 


The Category name ﬁeld is the equivalent of the META tag NAME attribute. 
For example, if you type copyright in the Category name ﬁeld and 2001, 
Mountain Jacques Inc. in the Content ﬁeld, the META tag generated and placed 
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between the <HEAD> and </HEAD> tags of the page is <META 
NAME=“copyright” CONTENT=“2001, Mountain Jacques Inc.”>. 


You can also deﬁne your own category and content. For example, you could 
enter content providers as the Category name and a list of the colleagues that 
worked on the site in the Content ﬁeld. This information has no meaning for the 
search engines, but lets you track the content providers for the site. 


Viewing Modiﬁcation History 


➲ From the Tools menu, choose Options>Current Site and click the History tab. 


✦ 
Creation date. The date on which the site was created. You cannot edit this ﬁeld. 


✦ 
Last modiﬁed. The last date on which the site was changed. You cannot edit this 
ﬁeld. 


✦ 
Revision log. Enter comments into the Latest changes ﬁeld to keep a record of 
site modiﬁcations. The comments you type appear in the Past changes ﬁeld 
when you next open the site. 
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Setting Options for the Current Site 


Setting Backup Preferences 


➲ From the Tools menu, choose Options>Current Site and click the Backup tab. 


✦ 
Automatic backup. This option is selected by default. When you close NetObjects 
Fusion, the program automatically backs up your .nod ﬁle and saves it in the 
\Backups subfolder under the \User Sites\sitename folder. If you need to use one 
of these backup ﬁles, copy it from the \Backups folder into the \User 
Sites\sitename folder before you open it so the asset paths will be correct. 


If you do not want NetObjects Fusion to automatically back up your sites, clear 
the check box. 


✦ 
Backup location. NetObjects Fusion saves backup ﬁles in the \User 
Sites\sitename\Backups folder by default. To change the location of the backup 
ﬁles, type a new path name in the Backup location ﬁeld, or click Browse and 
select a new location. 


✦ 
File naming convention. Select a plain format or one that includes the date and 
time from the drop-down list. 


✦ 
Maximum number of backups stored. Indicate the number of backups you want 
NetObjects Fusion to keep. The oldest backups are overwritten as newer 
backups are created. The default is 4 backups; if you have adequate disk space, 
you can increase this number. 
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Working with Templates 
4 


A template is a predeﬁned set of pages and assets that you can modify to meet your 
needs. Templates can contain a single page, a site section, or an entire site. You can 
edit a template, create a new site from a template, or add a template to an existing 
site. 


You can export your NetObjects Fusion site as a template so you can share your 
work with other NetObjects Fusion developers or move your site to another 
computer system. 


NetObjects Fusion 7.5 template ﬁles are .zip ﬁles. Zip ﬁles provide a convenient 
way to group and compress ﬁles. Each template .zip ﬁle contains a TemplateName.nft 
ﬁle and all the folders required to build a site based on the template. Do not change 
the content of the .zip ﬁle. NetObjects Fusion depends on the structure of the ﬁle to 
ﬁnd assets when opening the template. If you try to open a .zip ﬁle that is not a 
NetObjects Fusion template ﬁle, you see a message and NetObjects Fusion does not 
open the ﬁle. 


Templates created in earlier versions of NetObjects Fusion are .nft ﬁles. If you have 
templates created in an earlier version of NetObjects Fusion, open them in 
NetObjects Fusion 7.5 and export them as templates to create a template .zip ﬁle. 


This chapter describes: 


✦ Creating new sites from templates 


✦ Using templates to expand sites 


✦ Changing an existing template 


✦ Exporting sites 


✦ Sharing NetObjects Fusion site ﬁles 
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Creating a Site from a Template 


Creating a Site from a Template 


You can use templates that you or your colleagues create and templates created in 
previous versions of NetObjects Fusion. See “Upgrading Your Sites” in NetObjects 
Fusion Getting Started. 


1. To create a new site based on a template, launch NetObjects Fusion and from 
the File menu of any view, choose New Site>From Template. 


The Select a Template File dialog appears. 


Note: The Blank Site and Import templates are in the \AutoSites folder. Do not 
delete or move these templates. If these templates are not available in this 
folder, you cannot create a new site or import a site. 


2. Navigate to the folder containing the template you want, select the appropriate 
TemplateName.zip file, and click Open. 


Note: You can also open .nft template ﬁles that were created in earlier versions of 
NetObjects Fusion. 
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The Save Site As dialog appears. 


3. Enter a name for the new site in the File name ﬁeld. 


4. Select the location where you want to save the site. By default, NetObjects 
Fusion saves your site in the NetObjects Fusion 7.5\User Sites folder, but you can 
store it in the location of your choice. 


5. Click Save. 


NetObjects Fusion opens in Site view and displays the page icons of the site you 
created. You can modify the SiteStructure as described in “Working with the 
SiteStructure” on page 34. 


Using Templates to Expand a Site 


One way to expand a site is to insert NetObjects Fusion templates in a speciﬁc 
location in your site. Templates are especially helpful if you have standard 
boilerplate sections or pages that you want to add to multiple sites. This is also a 
great way to share with other developers who use NetObjects Fusion. See 
“Exporting a Site” on page 61. 


When you insert a template, follow these guidelines: 


✦ Before you insert the template, select the location in Site view where you want 
to add it. The inserted site, page, or section becomes a child of the selected 
page. You can move the pages once they are inserted. 


✦ All inserted pages take on the SiteStyle of the current site. For example, if 
several developers separately create parts of a site, export their work as 
templates, and insert the templates into a single master site for publishing, the 


Type a site name 
here 
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Using Templates to Expand a Site 


master site’s SiteStyle ensures that the compiled site has a consistent look and 
feel. If you save the site as a template, the SiteStyle is saved as well. See 
Chapter 17, “Using SiteStyles.” 


✦ When NetObjects Fusion inserts a template, if the MasterBorder names 
duplicate those already in the site, it preﬁxes the template’s MasterBorders with 
Inserted and adds them to the current site’s library of MasterBorders. You can 
rename, edit, or delete these extra MasterBorders. See Chapter 10, “Managing 
MasterBorders.” 


✦ Every template begins with a single root page, which is helpful if you are 
adding the template to your site. However, if you want the root page of your 
template to be the Home page of your site, you must create a new site based on 
the template, rather than inserting it. 


To insert a template: 


1. In Site view, right-click the page under which you want to insert the template. 
This page becomes the parent of the inserted page or pages. 


2. Select Insert Template from the shortcut menu. 


The Insert Template dialog appears. 


3. Navigate to the template you want to insert and select the TemplateName.zip file. 


Note: You can also open .nft template ﬁles that were created in earlier versions of NetObjects 
Fusion. To remove unused styles imported from your template in your Style view, See 
“SiteStyles from Imported Sites” on page 261 


4. Click Open. 
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NetObjects Fusion inserts the template under the page you selected. The page 
data is added to the .nod ﬁle and the assets are added to the \Assets folder within 
the site folder. The original template is still available. 


Exporting a Site 


You can export any site or selected pages of a site as a template. NetObjects Fusion 
copies all assets into the \Assets folder of the template in the location you select and 
converts absolute paths to relative paths. NetObjects Fusion zips these ﬁles and the 
SiteStyle ﬁles and resources for any SiteStyle in use by the source site into the 
exported template. Exporting a site as a template is the only way to share sites with 
other NetObjects Fusion developers or to combine sites. You cannot simply copy 
the .nod ﬁle and assets from one computer to another. 


Before you export a site as a template, it is a good idea to verify the ﬁle assets and 
then delete unused assets. See “Managing File Assets” on page 471. 


To create a template: 


1. In Site view, from the File menu, choose Export as Template. 


2. Select: 


✦ 
Entire Site to include all pages in the site in the template. 


✦ 
Selected Pages to include only those pages selected in Site view in the 
template. 


The Save Template dialog appears. 
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Changing an Existing Template 


3. Type a name for the template, or accept the name assigned by NetObjects 
Fusion. 


4. Select the folder where you want to store the template. 


5. If you want the template to include the publish proﬁles associated with this site, 
select Include publish proﬁles. 


Be aware that if you select this option and your publish proﬁles include the 
password to your site’s FTP location, the password will be included in the 
publish proﬁles saved with the template. 


6. Click Save. 


NetObjects Fusion creates the template ﬁle, an \Assets folder, and a \Styles 
folder and zips them together in a single ﬁle. To transfer the template to another 
computer, you simply move the .zip ﬁle. 


Changing an Existing Template 


You can change or customize any NetObjects Fusion template. For example: 


✦ You can customize a standard company template so it contains your department 
name, location, and personnel information. 


✦ If your company develops custom sites, you can add your company name, 
contact information, and default links to the templates you use most often. 


✦ If you often create new pages or sites with the same look and feel, you can add 
standard objects to the NetObjects Fusion Blank Site template. 


To preserve the original template, copy the template .zip ﬁle before you edit or 
modify a default template. If you need to undo changes to a default NetObjects 
Fusion template, you can re-install it. 


Customizing a Template 


1. From the File menu, choose New Site>From Template. 


2. In the Select a Template File dialog, select the template you want to customize 
and click Open. 


3. In the Save Site As dialog, give the site the same name as the template. Do not 
enter an extension. 
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4. Modify the template page(s) and SiteStyle as necessary. 


5. In Site view, from the File menu, choose Export as Template. 


6. Choose the folder containing the original template if you want to modify the 
template, or choose another location if you want to preserve the original 
template. 


7. Insert the customized template in other sites as needed. 


Sharing NetObjects Fusion Site Files 


Templates are the only effective way to share NetObjects Fusion site ﬁles among 
several developers or across platforms. You cannot copy a Sitename.nod ﬁle to 
another computer and open it, because the ﬁle refers to ﬁles and styles that are not 
contained in the Sitename.nod ﬁle itself. 


To distribute or move a NetObjects Fusion site: 


1. Export the site as a template according to the information in “Exporting a Site” 
on page 61. 


2. Copy the template .zip ﬁle to the target computer via network, diskette, or other 
storage media. Locate the template so you do not have to move it after you 
create the site. This ensures that the assets are mapped correctly. 


3. Start NetObjects Fusion on the destination computer. 


4. From the File menu, choose New Site>From Template. 


The Select a Template File dialog appears. 


5. Open the template’s folder, select the TemplateName.zip file, and click Open. 


6. In the Save Site As dialog, enter a name for the new site in the File name ﬁeld, 
select the location where you want to save the site, and click Save. 


The site that was created in NetObjects Fusion on the source computer is now 
the active site, with its own Sitename.nod ﬁle, on the destination computer. 


If you open a template that uses a font which is not on your system, NetObjects 
Fusion substitutes the browser proportional font speciﬁed on the Text tab of the 
Options dialog. You can still apply the original font to any new text box in the site. 
When you open the site on a system that has the original font, it is restored. 
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Sharing NetObjects Fusion Site Files 
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Importing Sites and 
Documents 
5 


You can create a site or expand a site you are working on by importing a site that 
was created using a different site or page development tool. When you import an 
existing site, NetObjects Fusion duplicates the SiteStructure, page content, and 
links. It lays out content in a design as close as possible to the original. 


You can also expand a site by importing Microsoft Word ﬁles. The document 
becomes a page in your NetObjects Fusion site. 


This chapter describes: 


✦ Creating new sites from existing sites 


✦ Using existing sites to expand sites 


✦ Importing documents 
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Importing Existing Sites 


Importing Existing Sites 


When you create or expand a site by using an existing site, follow these guidelines: 


✦ Importing a complex site requires processing time. If the source site was created 
in NetObjects Fusion, it is more efﬁcient to import it as a template. 


✦ You can import an existing site from a local or networked drive, or from a 
remote location such as an intranet server or the World Wide Web. 


✧ To import from a local drive, you must know the drive and folder where the 
site’s Home page, usually named index.htm or index.html, is stored. 


✧ To import from a remote location, you must know the URL to the site’s top- 
level source page, such as http://www.netobjects.com. 


NetObjects Fusion does not import sites that are served behind a proxy 
server, ﬁrewall, or virtually hosted server. You must download the site to the 
local hard drive and then import from the local drive. 


✧ You can limit the number of pages and levels that NetObjects Fusion 
captures from a local or remote site. Levels are based on the hierarchy of 
pages in the source site, deﬁned by the site’s navigation; the ﬁrst level is 
always the site’s Home page. The second level consists of pages that are 
linked from the Home page. Third-level pages are linked from second-level 
pages, and so on. NetObjects Fusion imports as many pages as possible at a 
higher level before going to a lower level. 


✧ You must be connected to the Internet or intranet to activate the remote 
import. 


✦ When NetObjects Fusion imports a site, it starts with the page you specify and 
stops importing when it hits the page number limit, the site level limit, or the 
end of the site. If you don’t deﬁne import limits, NetObjects Fusion imports to 
the end of the site—no matter how long that takes or how much it requires in 
system resources. NetObjects recommends limits of 200 pages and 20 levels. 


✦ When you create a new site from an imported site, NetObjects Fusion applies 
the ZeroMargins MasterBorder. If you expand a site by importing a section, you 
can apply any MasterBorder already in the site. If you import a NetObjects 
Fusion MX, NetObjects Fusion 7 or NetObjects Fusion 7.5 site, the 
MasterBorders in the original site are preserved. 
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✦ HTML coding practices vary, so the contents of the source site pages are 
unpredictable. Spaces in .html ﬁle names cause import problems. 


✦ NetObjects Fusion does not import server-side imagemaps or manage server- 
side resources. If the imported site originally used server resources such as 
JavaScripts, CGI scripts, or server-side includes, you must manually recreate 
these on your server. If a page contains too much script, you can reference the 
HTML. See Chapter 24, “Referencing and Editing External HTML.” 


✦ NetObjects Fusion imports all HTML tables in the site. 


✦ NetObjects Fusion’s import feature supports most of the HTML 3.2 
speciﬁcation. Cascading style sheet coding is removed from pages during 
import. Content with no other alignment formatting is placed ﬂush left on its 
page. 


✦ When you import a site that was built using HTML frames, NetObjects Fusion 
imports the frameset’s content pages as regular pages, and references the 
original frameset page as an external HTML page. 


Sites created in NetObjects Fusion MX, NetObjects Fusion 7 or NetObjects Fusion 
7.5 generally import with few problems, but you should be prepared to clean up an 
imported site created from another source. Adjust font sizes and styles as needed, 
and add NetObjects Fusion navigation bars and banners as appropriate to your 
design. If a page does not import the way you expect, check the original source ﬁle 
for incorrect or nonstandard HTML code. 
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Importing Existing Sites 


Creating a New Site from an Existing Site 


1. From the File menu, choose New Site>From Existing Web Site. 


The Import Web Site dialog appears. 


2. Select Local or Remote import. 


3. Enter the exact ﬁle location and path to the top-level page you want to import: 


✦ To specify a local site, enter the full drive and path to the local site’s top- 
level source page in the Home page ﬁeld, or click Browse, select the 
appropriate top-level page, and click OK. 


✦ To specify a remote site, enter the full URL to the site’s top-level source 
page in the Home page ﬁeld. To ensure accuracy, navigate to the site or page 
using your browser, then copy and paste the URL from the browser. 


The starting page of your site import does not have to be the source site’s Home 
page, usually named index.htm or index.html; it can be any page of any 
accessible Internet or intranet site. You must have full access to this page and 
the other pages in the site through HTTP 1.0. If you do not have HTTP 1.0 
connectivity or there are other security measures such as robots.txt or ht.access 
ﬁles, virtual hosting, or a ﬁrewall, you must download the site to your local hard 
disk via an FTP connection and then select Local import. This also applies if 
you have a virtual domain, because virtual domains require HTTP 1.1. 


4. Set the limits for the number of pages and number of levels you want to apply to 
the import process. NetObjects recommends limits of 200 pages and 20 levels. 


When importing a site to add to 
the current site, you can assign 
a MasterBorder 
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5. If you are importing a local site, enter the domain name for the site’s Home 
page in the Domain name ﬁeld. If the local site was ever published on the Web, 
use the domain name that was used to access it; if not, leave the placeholder 
www.domain.com in the ﬁeld. 


When it imports a local site, NetObjects Fusion needs to know the “home base” 
domain of that site, so it can tell whether to convert any absolute links it ﬁnds 
into external or internal links. It does that by comparing the targeted domain, if 
there is one, to the domain name you enter. 


If you are importing a remote site, make sure your system is connected to the 
Internet or intranet so NetObjects Fusion can link to and import the site. 


6. Click OK. 


The Save Site As dialog appears. 


7. Enter a name for the new site in the File name ﬁeld. 


8. Select the location where you want to save the site. By default, NetObjects 
Fusion saves the site in the NetObjects Fusion 7.5\User Sites folder, but you can 
store it in the location of your choice. 


9. Click Save. 


NetObjects Fusion imports the site and converts its content, structure, and links 
into NetObjects Fusion format. If you import a site created with NetObjects 
Fusion, the MasterBorders are imported with the site. For a remote import, it 
stores the site’s assets and all original HTML ﬁles in the \Sitename\Import folder, 
and assigns the ZeroMargins MasterBorder to each page in the new site. If you 
are importing a site to expand an existing site, you can choose a MasterBorder 
from the Assign MasterBorder drop-down list. 


10. Navigate to each page and make necessary adjustments. 
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Importing a Microsoft Office Document 


Using an Existing Site to Expand a Site 


1. In Site view, select the page you want to use as the parent of the imported 
content. 


2. From the File menu, choose Import>Web Site. 


3. Follow the steps in “Creating a New Site from an Existing Site” on page 68. 


When you use a site to expand a site, you can also select a MasterBorder for the 
imported section. From the Assign MasterBorder drop-down list, select the 
MasterBorder you want to apply to the imported site or section. 


Importing a Microsoft Ofﬁce Document 


If Word 97, Word 2000, or Word version 2002 is installed on your system, you can 
import documents in Microsoft Word, Word for Macintosh, and .rtf formats. 


When you import a Microsoft Ofﬁce document, the imported document becomes a 
page in your NetObjects Fusion site. Once imported, you can change the design and 
layout of the page in NetObjects Fusion. In this method of importing, there is no 
connection between the new pages and the original document. If you update the 
document, there is no corresponding change in the content of the NetObjects 
Fusion pages. 


If you are going to import a very long document, for example a 40-page report, it is 
a good idea to split it into smaller documents to ensure that you do not exceed the 
NetObjects Fusion limit for a Layout. 


If it is important for you to maintain a link to the original document, you can 
publish an HTML version of the document at the time you publish the site. See 
“Creating a File Link” on page 293. 


1. In Site view, select the page you want to use as the parent of the imported 
document. 


2. From the File menu, choose Import>Document. 


The Import Document dialog appears. 
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3. Choose the appropriate ﬁle type from the Files of type drop-down list, and 
navigate to the document you want to import. 


4. Select a MasterBorder to apply to the new pages from the Assign MasterBorder 
drop-down list. 


5. Click Open. 


The ﬁle is imported into the site and placed as a child page below the selected 
page in Site view. 


Note: You can also import a document from Page view. See “Importing Pages” on 
page 82. 
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Importing a Microsoft Office Document 
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Page View Basics 
6 


Page view is where you add text, graphics, and other objects to develop page design 
and add content. You can use a variety of tools, object properties, and layout aids, 
such as rulers, guides, and grids, to add and arrange objects on the page. 


This chapter describes: 


✦ MasterBorder and Layout area 


✦ Setting up the Page view display 


✦ Displaying pages in Page view 


✦ Setting page size 


✦ Adding objects to the page 


✦ Editing objects 


✦ Positioning objects 


✦ Layering objects 
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Exploring Page View 


Exploring Page View 


You use the tabs between the control bar and horizontal ruler to see different views 
of the page. Use: 


✦ 
Page Design view to add objects to the page. 


✦ 
HTML Source view to look at and edit the page’s HTML code. See “Editing the 
Page’s HTML” on page 448. 


✦ 
Page Preview to view the current page in Microsoft Internet Explorer. 


Layout area 


MasterBorder 
area 


Page name 


Docked 
toolbar 


Properties 
palette 


Grid 


Rulers 
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MasterBorder and Layout Area 


In NetObjects Fusion, a page consists of a Layout area and a MasterBorder area. 
The Layout area is the body of the page. It contains objects that are unique to that 
page. The MasterBorder is the page margins. MasterBorders contain objects, such 
as navigation bars, that appear on multiple pages. 


You can deﬁne multiple Layouts and MasterBorders, then assign one of each to a 
page. See “Working with MasterBorders” on page 128 and “Working with 
Layouts” on page 108. 


Setting Up the Page Design View Display 


Use the Palette Launcher buttons in the lower left corner of the NetObjects Fusion 
window to open and close the Properties palette, Site Navigation palette, and 
Object Tree palette. See “NetObjects Fusion Window” on page 9, “Using the Site 
Navigation Palette” on page 77, and “Using the Object Tree Palette” on page 85. 


Use the commands on the View menu to show or hide Page Design view elements. 


✦ Show and hide palettes and toolbars as described in “NetObjects Fusion 
Window” on page 9. 


✦ Use the MasterBorder command to hide the MasterBorder. This provides more 
onscreen area for you to work on the page Layout. 


✦ Use the Page Labels command to show and hide the Layout and MasterBorder 
labels and margin lines. 


✦ Display object outlines to help you control object size and position. 


✦ Use the Object Icons command to display or hide the indicator icons. 


✧ Link icon indicates the object has an associated link. 


✧ Anchor icon indicates the object has an anchor point to which you can link. 


✧ Script icon indicates the object has associated HTML or scripts. 


Properties palette 


Object Tree palette 


Site Navigation palette 
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Displaying Pages in Page View 


✧ HTML tag icon indicates the text has an HTML tag inserted at this point. 


✧ Embedded object icon indicates the embedded object’s insertion point. 


✧ Action icon indicates an action is associated with the object. 


✧ Warning icon indicates a potential layout problem or other error condition. 
A ScreenTip identiﬁes the problem. You cannot hide this icon. 


✧ Question mark icon indicates an empty navigation bar. You cannot hide this 
icon. 


✦ Select Rulers & Guides from the View menu to show and hide rulers and guides. 


✦ Select Grid from the View menu to show and hide grids. 


Setting Page Properties 


To display the Page Properties palette, from the View menu, select Page View 
Options and click the Page tab. See “Setting Page Properties” on page 37. 


Displaying Pages in Page View 


You can display a page from Site view, or move between pages in Page view using 
the Site Navigation palette or the Go To command on the Go menu. For information 
about the Go To command, see “Using the Go Menu” on page 12. 


Displaying a Page from Site View 


From Site view, to display a page in Page view: 


Page view 


✦ Click the page icon, then click the Page button on the control bar. 


✦ Double-click the page icon. 


✦ Click the page icon, then from the Go menu, choose Page. 
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Using the Site Navigation Palette 


The Site Navigation palette displays the SiteStructure. 


Site Navigation palette 


1. In Page view, click the Site Navigation palette button. 


The Site Navigation palette appears. 


2. Double-click the page you want to open. 


NetObjects Fusion displays the page you select. 


Setting Page Size 


The size of a NetObjects Fusion page is deﬁned by the combined size of the 
MasterBorder and Layout area. The default page size is 730x555 pixels. You can 
redeﬁne the default page size on the General tab of the Current Site Options dialog. 
See “Changing General Settings” on page 52. 


You can change the size of an individual page by adjusting the size of the 
MasterBorder area, the Layout area, or both. 
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Setting Page Size 


To resize the Layout and MasterBorder areas: 


With the rulers showing, drag a Layout or MasterBorder handle to change the area’s 
height and/or width. Use the far right MasterBorder handle to change the size of the 
right MasterBorder and the bottom MasterBorder handle to change the size of the 
bottom MasterBorder. 


To set Layout size precisely, enter values in the Layout Width and Height ﬁelds on 
the General tab of the Layout Properties palette. For precision MasterBorders, enter 
values for the left, right, top, and bottom margins on the General tab of the 
MasterBorders Properties palette. 


You cannot make a Layout or MasterBorder smaller than the objects it contains. 
You cannot lock the size of a Layout or MasterBorder. If you add an object that is 
larger than the Layout or MasterBorder, the area expands to accommodate the 


Layout Width 
and Height ﬁelds 


MasterBorder 
handle 


MasterBorder 
handles 


Layout area 
handle 


Layout area handle 
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object. If you are working with Windows 98, or ME, the upper limit for a Layout 
area is 33,000 pixels by 33,000 pixels. 


Adding Objects to the Page 


You can use the tools on the toolbars, or drag and drop ﬁles onto the page to place 
objects. 


Using Object Tools 


1. In Page view, select the tool you want to use. 


2. Draw a box to position the object. 


For some objects, you must select a ﬁle from the Open dialog. 


The object appears on the page with the appropriate properties palette. The 
options displayed on the properties palette vary depending on the object. 


3. Set the object properties. 


After you use a selected tool to place an object on the page, the Selection tool 
automatically becomes active. To use a tool repeatedly to add several objects, 
double-click it to keep it active. This does not work for the Form area tool or the 
Component tools. 


Page View Toolbars 


Page view includes Standard, Advanced, Component, and Form toolbars. Internal 
Page components are on the NetObjects Fusion Components toolbar. If you install 
third-party Page components, associated toolbars are listed on the View, Toolbars, 
Component Tools menu. For general information about using toolbars, see “About 
Toolbars” on page 11. 
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Adding Objects to the Page 


Standard Toolbar 


Form Toolbar 


Hotspot tools 
See Chapter 19 


Zoom tools 
See Chapter 1 


Form area tool 
See Chapter 25 


Draw Shape tools 
See Chapter 16 


Span tool 
See Chapter 12 


Link tool 
See Chapter 19 


Selection tool 
See Chapter 1 


Container tools 
See Chapter 15 
and Chapter 8 


Anchor tool 
See Chapter 19 


Picture tool 
See Chapter 13 


Navigation tools 
See Chapter 18 


Line tools 
See Chapter 16 


Text tool 
See Chapter 12 


Forms Button tool 
See Chapter 25 
Check Box tool 
See Chapter 25 


Edit Field tool 
See Chapter 25 
Multi-line tool 
See Chapter 25 
Forms Combo Box tool 
See Chapter 25 


Radio Button tool 
See Chapter 25 
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Advanced Toolbar 


NetObjects Fusion Components Toolbar 


E-Commerce Catalog tool 
See Chapter 20 


Digital Video tool 
See Chapter 21 


Photo Gallery tool 
See Chapter 14 


Dynamic Media tool 
See Chapter 21 


Web Applications tool 
See Chapter 22 


Data List tool 
See Chapter 27 


HTML tool 
See Chapter 19 


Plugin tools 
See Chapter 21 


External HTML tool 
See Chapter 24 


Services tool 
See Chapter 6 


Ad Banner tool 
See Chapter 26 
DynaButton tool 
See Chapter 26 


Picture Loader tool 
See Chapter 26 


Site Mapper tool 
See Chapter 26 


Rotating Picture tool 
See Chapter 26 
Screen Door tool 
See Chapter 26 


Picture Rollover tool 
See Chapter 26 


Form Handler tool 
See Chapter 25 


Time Based Picture tool 
See Chapter 26 


Ticker Tape tool 
See Chapter 26 


Go Menu tool 
See Chapter 26 
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Adding Objects to the Page 


Dragging and Dropping Objects 


1. In Windows Explorer, select the ﬁle you want to place. 


You can drag and drop any ﬁle you can place with an object tool. 


2. Drag the ﬁle into the NetObjects Fusion window and drop it on the page. 


3. Set the object’s properties. 


Importing Pages 


In Page view, you can import a page authored elsewhere, convert it to NetObjects 
Fusion format, and edit its contents as you would any other page. You can import 
ﬁles with .htm, .html, .jsp, .rtf, or .txt extensions, or ﬁles created in Microsoft Word 
97, Word 2000, or Word version 2002. 


If you prefer not to convert an HTML page to NetObjects Fusion format, you can 
place it as an object. See “Referencing HTML from Page View” on page 382. 


Note: Because of variations in HTML code, not all pages import exactly as you see them. 
Unpredictable results can occur if the page contains incorrect HTML. Non-HTML, such 
as JavaScripts and CGI scripts, does not import. If NetObjects Fusion cannot parse the 
HTML, it is imported, but appears as external HTML. 


1. In Page view, display the Layout on which you want to import the page. 


It is easiest to import a page into a Layout that contains no content, because 
objects from the imported ﬁle will overlay existing objects. 


2. From the File menu, choose Import>HTML Page or Import>Document. If you 
do not have a supported version of Word installed on your system, 
Import>Document is not available. 


The File Open or Import Document dialog appears. 


3. Select the type of ﬁle you want to import from the Files of type list. 


4. Select a ﬁle from your hard disk or LAN. To use a ﬁle on a CD-ROM, copy it to 
your hard disk. To reuse an HTML ﬁle already included in the site, select it 
from the HTML Assets tab. 


5. Click Open. 


NetObjects Fusion places the contents of the ﬁle on the current page, beginning 
in the upper left corner of the Layout area. 
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You can also import a document from Site view. See “Importing a Microsoft Ofﬁce 
Document” on page 70. 


Reusing Assets 


By treating object ﬁles as assets, NetObjects Fusion provides you with a convenient 
way to replace or update multiple instances of an object. Reusing assets can also 
reduce the number of ﬁles stored on the server. Instead of adding multiple copies of 
a ﬁle in several locations, you add the asset once and then select from the list of 
existing assets when you want to place another instance of the asset. 


To place an asset: 


1. In Page view, choose the appropriate tool and draw a box to specify where you 
want to place the asset. 


The File Open dialog appears. 


2. Click the Assets tab to see a list of current assets. 


3. Select the asset you want to place and click Open. 


NetObjects Fusion places the asset on the page and opens the appropriate properties 
palette. In Assets view, you can replace all instances of this asset in your site using 
a single command, or add ﬁle assets. See Chapter 29, “Managing Assets.” 


Show thumbnail 
image check box for 
picture asset 
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Editing Objects and Assets 


Adding and Modifying Alt Tags 


To make pages load faster, some visitors set up their browsers so they do not 
display images. To ensure that your pages provide the information you want to 
convey regardless of how the site visitor’s browser is set up, use alt tags to provide 
descriptive text that appears when images are not displayed. You can add an alt tag 
to image, Java, drawn shape, generic plugin, QuickTime, Shockwave, audio, and 
video objects in the AltTag ﬁeld of the properties palette. 


Microsoft Internet Explorer 4.x and greater and Netscape Navigator 4.x display alt 
tag text in a ScreenTip when site visitors point at an object, so make sure every alt 
tag is appropriate for a ScreenTip. 


To add or modify an alt tag: 


➲ On the object’s Properties palette, type a descriptive name in the AltTag ﬁeld. 


Editing Objects and Assets 


You can edit objects created in other software applications from within NetObjects 
Fusion. In Page view, right-click the object and select Open File In External Editor 
from the shortcut menu. In Assets view, you select the Asset, and then from the 
Asset menu, select Open File in External Editor. If the correct application does not 
open, the ﬁle type of the object or asset is probably not associated with the correct 
application. You can set external ﬁle editors for .html, .gif, and .jpg ﬁles on the 
Program tab of the Options dialog. See “Setting Program Options” on page 20. 


AltTag ﬁeld 
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Selecting an Object 


In NetObjects Fusion you might not always be aware of making a selection, but in 
Page view something is always selected. For example, when you switch from Site 
view to Page view, the Layout Properties palette appears. You might not see 
evidence that the Layout is selected, but it is indicated by the properties palette. To 
ﬁnd out what is selected at any time, check the properties palette. 


Using the Selection Tool 


Selection tool 


➲ Click the Selection tool on the Standard toolbar. 


✧ Click an object to select it. Click elsewhere to deselect it. 


✧ Drag a marquee around multiple objects, or Shift+Click each object you 
want to select. Shift+Click selected objects one-by-one to deselect them. 


Using the Object Tree Palette 


The Object Tree palette provides a convenient way to select objects, especially if 
you are working with layered or hidden objects. 


Object Tree palette 


1. In Page view, click the Object Tree palette button in the lower left corner. 


The Object Tree palette appears. 


2. Click an object in the Object Tree palette to locate it on the page. 


Selection handles appear around the object on the page. 
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Positioning Objects 


Renaming an Object 


If you add several of the same type of objects to a Layout or MasterBorder, 
NetObjects Fusion numbers each object in the order in which you placed it. You can 
rename the objects for easy identiﬁcation. These names are only for use by 
NetObjects Fusion; they do not affect the ﬁnal Web site. 


Object Tree palette 


1. In Page view, click the Object Tree palette button in the lower left corner. 


The Object Tree palette appears. 


2. Select the name of the object, then click again and type a new name. Some 
objects cannot be renamed. 


Resizing an Object 


➲ Click an object and drag the selection handles to resize the object. If the Display 
property of a Picture is set to Normal, you cannot make the image larger. 


To make multiple objects the same size: 


1. In Page view, select the objects by Shift+Clicking each one or by drawing a 
marquee around them. 


2. From the Object menu, choose Size Objects: 


✦ Width, to make the objects the same width. 


✦ Height, to make the objects the same height. 


The selected objects size to match the largest object you select. 


Positioning Objects 


Moving or Copying an Object 


✦ Click and drag an object to move it. 


✦ Press Ctrl, then click and drag an object to copy it. 


✦ To prevent an object from dropping into a container, such as a Layout Region or 
text box, select the object and press Alt while moving it over a container. 


✦ You can move or copy objects from Layout to Layout in Page view using the 
Cut, Copy, and Paste commands on the Edit menu. 
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To specify the position of an object before you paste it, click the page and then 
use the Paste command. The upper-left corner of the pasted object appears at the 
point where you click the page. 


Aligning and Distributing Objects 


In a Layout or Layout Region, you can align two or more objects to each other and 
distribute three or more objects equidistant from each other. You can also align and 
distribute objects relative to the Layout or Layout Region. 


1. In Page view, select the objects you want to align by Shift+Clicking each one or 
by drawing a marquee around objects in the Layout. 


If you select different types of objects, the Multi-Object Palette appears. If the 
object properties appear, click the Position tab. 


2. If you want the objects to align or be distributed relative to the Layout or Layout 
Region in which the objects are placed, select Relative to Layout. 


3. In the Align section, specify the horizontal and vertical alignment. 


When aligning objects, NetObjects Fusion uses the object furthest in the 
direction you specify as the reference point. For example, if aligning left, the 
leftmost object is used; the topmost object is used when aligning top. When 
centering objects, NetObjects Fusion chooses the average distance between the 
selected objects as the center point. 


✦ Select an option from the Horizontally section to align objects’ left or right 
sides, or to center them. If you select Relative to Layout, the objects align to 
the right or left side of the Layout, or are centered in the Layout, one on top 
of the other. 
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Positioning Objects 


✦ Select an option from the Vertically section to align objects’ top or bottom 
sides, or to center them. If you select Relative to Layout, the objects align to 
the top or bottom of the Layout, or are centered in the Layout side-by-side. 


✦ Select Horizontally or Vertically from the Distribute section to make 
selected objects equidistant. 


Note: Object alignment can have an impact on preserving your design and optimizing your 
code. See “Optimizing Dynamic Page Layout Output” on page 99. 


Adding, Moving, and Deleting Guides 


Use the page guides to align objects vertically and horizontally. You can add as 
many guides as you want to either the MasterBorder or the Layout area. 
MasterBorder guides are red, Layout area guides are blue. Guides associated with a 
MasterBorder appear on all pages that use that MasterBorder. Guides you create are 
saved with the site. To: 


✦ Add a guide, select the Layout or MasterBorder, and click in the ruler or hold 
down the Ctrl key while you drag an existing guide. 


✦ Move a guide, click its arrow on the ruler and drag it. 


✦ Delete a guide, click its arrow and drag it off the ruler. 


✦ Show or hide a guide, select Rulers & Guides from the View menu. 


Snapping Objects to Grids, Guides, and Each Other 


Use the Snap feature to align objects exactly. When you select a Snap to command, 
NetObjects Fusion creates a “magnetic” attraction between the selected object and 
the grid, guide, or other objects. Forcing objects to snap to grids, guides, and each 
other makes your HTML code more efﬁcient. 


To force objects to snap to: 


On the left, the objects 
are aligned horizontally 
to the left; on the right, 
the objects are aligned 
the same way relative to 
the Layout 
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✦ Guides, select Snap to Guides from the View menu. 


✦ Grids, select Snap to Grid from the View menu. 


✦ Other objects, select Snap to Object Outlines from the View menu. 
Make sure the item you are snapping to is visible in Page view. See “Setting Up the 
Page Design View Display” on page 75. 


Layering Objects 


NetObjects Fusion supports Fixed Page Layout, a form of HTML output that 
displays overlapped objects correctly. Site visitors using Microsoft Internet 
Explorer 4.x or higher or Netscape Communicator 4.x can see objects overlap other 
objects. See “Publishing with Fixed Page Layout” on page 103. 


To overlap objects: 


1. In Page view, on the General tab of the Layout Properties palette, select Fixed 
Page Layout in the HTML output section. 


2. Place two or more objects in the Layout or a Layout Region. 


Objects are layered in the order in which you place them. To change the layering 
order, see the next section. 


Rearranging Layered Objects 


Object Tree palette 


1. In Page view, click the Object Tree palette button in the lower left corner. 


2. In the Object Tree palette, click the object you want to move. 


Handles appear around the object on the page. 


3. Click and drag the object up or down the tree to move it to a different layer, or 
from the Object menu, choose Arrange Objects and select: 


✧ Bring Forward to bring the object up one layer. 


✧ Bring to Front to bring the object to the top of the layer. 


✧ Send Backward to send the object down one layer. 


✧ Send to Back to send the object to the bottom layer. 
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Adding Services 


Adding Services 


Use the Services tool on the Advanced toolbar to add hosted services with a page 
level component to your site. 


1. In Page view, select the Services tool and click on the page where you want to 
place the service. 


2. Select the service you want and follow the onscreen instructions. 
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Controlling Published Output7 


The default settings for NetObjects Fusion generate efﬁcient HTML that faithfully 
reproduces your visual design on the published page. The design of your text 
content, however, is subject to each site visitor’s browser settings. To limit these 
variations, NetObjects Fusion offers ways to control published output. You can: 


✦ Select from four different types of page containers to serve as your page layout 
medium: Layout area, Layout Regions, text boxes, and tables. 


✦ Use one of three HTML output methods to generate your site’s HTML: 
Dynamic Page Layout, Regular Tables, and Fixed Page Layout. 


✦ Control the table formatting priority—horizontal or vertical—used to generate 
Dynamic Page Layout HTML pages. 


✦ Select HTML or cascading style sheet (CSS) text formatting. 


This chapter describes: 


✦ Approaches to page design 


✦ Selecting a layout method 


✦ Selecting an HTML output method 


✦ Publishing with Dynamic Page Layout 


✦ Publishing with Regular Tables 


✦ Publishing with Fixed Page Layout 


✦ Matching design priorities with HTML output method 
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Approaches to Page Design 


Approaches to Page Design 


In NetObjects Fusion, a container is an object into which you can embed other 
objects. A container can be any size and can hold any kind and number of objects. 
NetObjects Fusion provides five types of containers you can use to design and lay 
out pages: 


✦ The Layout is the body of the page, surrounded on all four sides by the 
MasterBorder. Each page has at least one Layout, although you can create 
additional layouts as needed. See “Working with Layouts” on page 108. 


✦ Layout Regions are mini-layouts that you can use to subdivide the page. You can 
draw and place Layout Regions anywhere on the page, and place any kind and 
number of objects—including text boxes or other Layout Regions—within their 
borders. See “Working with Layout Regions” on page 110. 


✦ Text boxes are a special class of objects because you can embed other objects 
within them. You can also maximize a text box so it ﬁlls the entire Layout—in 
effect, using a single text box to lay out the entire page. See Chapter 9, 
“Working with Text Boxes.” 


✦ Tables serve as containers for objects. If your page design is based on rows or 
columns of content—as in a spreadsheet or other tabular arrangement—you can 
lay out all or part of your page in tables. You can then lay out your content 
within the cells of the table. You can embed any object in a table cell. See 
Chapter 15, “Adding Tables.” 


✦ MasterBorders contain objects that repeat on a set of pages. You can place 
anything in a MasterBorder that you can place in the Layout, including banners, 
pictures, and text. By placing navigation bars in a MasterBorder you can give 
pages with the same navigational needs the same navigational structure. See 
Chapter 10, “Managing MasterBorders.” 


The type of container you choose determines which of the following page design 
options you use. You can: 


✦ Position content with pixel-level precision by dragging objects into place. The 
position-based approach uses Layouts and Layout Regions as containers and 
preserves your position-based layout by generating pages consisting of HTML 
and cascading style sheet code. 


✦ Use a text-based approach. With text-based design you can preserve the ﬂow of 
content by embedding objects in text boxes or table cells. Text-based page 
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layout generates lean and efﬁcient HTML code that responds effectively to 
variations in browser and font size. 


✦ Include hand-coded HTML pages in your site. You incorporate external HTML 
pages as part of your site by referencing them as objects on a page, or the page 
itself. You can also add HTML in HTML Source view. See Chapter 28, 
“Working with HTML Directly” and Chapter 24, “Referencing and Editing 
External HTML.” 


Selecting a Layout Method 


There’s no “best way” to lay out your pages; your circumstances determine which 
method works best. The pros and cons of each method are listed here. 


Using Layouts 


If precise placement of content is important to you, or if you want to publish 
individual pages using an HTML output type that is different from the rest of the 
site, use the Layout area as the container for your page layout. 


Layout Advantages 


✦ You have pixel-level control of the layout and design of your page. 


✦ You can drag-and-drop objects into position. 


✦ You can specify the HTML output type for any individual Layout. 


✦ Layouts support the column or row priority for page formatting, which means 
pages adjust more predictably to a site visitor’s font and display conﬁgurations. 


Layout Limitations 


✦ Position-based pages require more HTML code to achieve pixel-level 
placement of content, so your HTML ﬁles will be somewhat larger. 


✦ Text cannot ﬂow around other objects unless they are embedded in a text box. 
To create a text wrap effect you have to create multiple text boxes to contain the 
other objects. 


✦ You cannot set the Layout to wrap to the width of your site visitor’s browser. If 
the browser window is wider than your page, the page’s background ﬁlls in; if 
the window is smaller than your page width, your site visitor has to scroll. 
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Selecting a Layout Method 


Using Layout Regions 


Like Layouts, Layout Regions offer pixel-level placement and a choice of HTML 
output methods, but you can embed them in text boxes. So, if you need precise 
placement or speciﬁc output for some content, but want to generate leaner pages, 
you can use text boxes as your main layout container and embed Layout Regions 
for selected content. 


Layout Region Advantages 


✦ You have pixel-level control of the layout and design of content within the 
Layout Region. 


✦ You can embed the Layout Region within a text box, which combines the 
beneﬁts of both containers. 


✦ You can specify the HTML output type for any individual Layout Region. 


✦ Layout Regions support the column or row priority for page formatting so 
selected sections of your page can adjust more predictably to site visitor’s font 
and display conﬁguration. 


Layout Region Limitations 


✦ HTML page ﬁles are signiﬁcantly larger and download more slowly. 


✦ Text cannot ﬂow around other objects unless they are embedded in a text box. 
To create a text wrap effect, you have to create multiple text boxes within the 
Layout Region. 


✦ You cannot maximize a Layout Region to the full Layout size, or set the Layout 
Region to wrap to the width of your site visitor’s browser. 


Using Text Boxes 


If efﬁcient, lean HTML pages are more critical to site visitors than precise 
placement of content, use a text box for page layout. 


Text Box Advantages 


✦ NetObjects Fusion generates extremely efﬁcient HTML code for your site. 
HTML ﬁles are smaller, which means they load faster. 


✦ Text within the text box can be set to ﬂow around other embedded objects, so 
you don’t have to create multiple text boxes to achieve a text-wrap effect. 
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✦ You can set the text box to expand itself to the size of the browser window. 
When your site visitor views the page, it rewraps to ﬁt within the browser 
window. 


✦ You can use any HTML output method: Dynamic Page Layout, Regular Tables, 
or Fixed Page Layout. 


Text Box Limitations 


✦ You give up pixel-level control of the layout and design of your page, and use 
alignment choices to control the placement of objects, which means the way 
they appear in a browser can be somewhat unpredictable. 


Using Tables 


If your page design or page content is tabular, you can use a NetObjects Fusion 
table to control the layout of the entire page. 


Table Advantages 


✦ Each cell within a table functions like a text box, with all the attributes and 
controls of a text box outside the table. 


✦ You can embed objects within cells, arrange them using each object’s alignment 
properties, and wrap text around objects. 


✦ You can use a percent width layout so the basic layout design adjusts to changes 
in browser window width, font sizes, or screen resolution. 


Table Limitations 


✦ You give up pixel-level control of the layout and design of your page, and use 
alignment choices to control the placement of objects. 


✦ Browsers interpret tables differently, so be sure to view the table in all versions 
of the target browsers. 
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Selecting an HTML Output Method 


The wide range of browser versions and capabilities makes it difﬁcult to know 
exactly what kind of HTML tags and functions will display effectively to site 
visitors. Advances in HTML coding and browser abilities have also made it 
possible to create pages using less code and more efﬁcient downloads—if your site 
visitor’s browser can support it. To address these concerns and take advantage of 
these improvements, you can choose from three types of HTML output when 
publishing your site. 


✦ 
Dynamic Page Layout uses Nested Table tagging and other features of the 3.2 
HTML speciﬁcation. This is the default output method because it produces the 
most predictable and consistent results onscreen, regardless of the type, version, 
or conﬁguration of the site visitor’s system or browser fonts. Both Microsoft 
Internet Explorer 2.x and above and Netscape Navigator 2.x and above correctly 
display pages published in Nested Tables format. See “Optimizing Dynamic 
Page Layout Output” on page 99. 


✦ 
Regular Tables uses a single table for your page design and content. Both 
Microsoft Internet Explorer 2.x and above and Netscape Navigator 2.x and 
above correctly display pages published in Regular Tables format, although site 
visitors’ results might vary according to their system and browser font settings. 


Note: If you select Dynamic Page Layout or Regular Tables, be sure your pages do 
not have overlapping objects, or your published results will not be what you 
expect. See “Editing Objects and Assets” on page 84 for information. 


✦ 
Fixed Page Layout uses cascading style sheets, layers, and scripts to position and 
publish your design and content. Both Microsoft Internet Explorer 4.0 and 
greater and Netscape Communicator 4.x correctly display pages published in 
Fixed Page Layout format, although the site visitors’ results might vary 
according to their system and browser font settings. Netscape Navigator 6.0 
does not support this option. 


On the General tab of the Current Site Options dialog, you designate which type of 
HTML output is generated. This setting determines the site setting for HTML 
output. You can override this setting for individual Layouts and Layout Regions, so 
NetObjects Fusion generates the HTML using a different method. See “Setting the 
HTML Output Method for a Layout or Layout Region” on page 113 for 
information. 
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Setting the Site’s HTML Output Method 


To set the publishing method for your site: 


1. From the Tools menu, choose Options>Current Site. 


The Current Site Options dialog appears. 


2. Click the Change button. 
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Selecting an HTML Output Method 


The Browser Compatibility dialog appears. 


3. Select Browser compatibility options. You can select Netscape Navigator 4.x or 
Microsoft Internet Explorer 4.0 and above or both. 


4. Select the default HTML generation option for this site: 


✧ Dynamic Page Layout and Regular Tables are compatible with all browsers. 


✧ If you select Fixed Page Layout and: 


✧ Netscape Navigator 4.x, NetObjects Fusion generates layers using the 
Netscape <LAYER> tag. This optimizes output for sites viewed in 
Netscape Navigator 4.x. This option is not supported by Netscape 6.0. 


✧ Microsoft Internet Explorer 4.0 and above, NetObjects Fusion generates 
cascading style sheet positioning code to achieve a high level of layout 
accuracy. This optimizes output for sites viewed in Microsoft Internet 
Explorer. 


✧ Netscape Navigator 4.x and Microsoft Internet Explorer 4.0 and above, 
NetObjects Fusion generates cascading style sheet positioning code and 
layers. This option is not supported by Netscape 6.0. 
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Publishing with Dynamic Page Layout 


When you choose Dynamic Page Layout, NetObjects Fusion uses complex hidden 
tables to achieve the highest level of layout accuracy across browsers. To see the 
table borders in your browser, hold down Shift when you click Preview Site or 
Publish Site. 


Dynamic Page Layout is the default publishing method for NetObjects Fusion. 
Using Dynamic Page Layout: 


✦ You get relative placement of your content as you designed it in Page view, with 
relative spacing preserved regardless of the site visitor’s display conﬁguration. 


✦ You can prioritize the vertical relationship between objects so site visitors are 
more likely to see the pages as you designed them, regardless of their local 
browser, font, and display conﬁgurations. 


✦ Pages can be viewed in most browsers that support the 3.2 HTML speciﬁcation, 
including Microsoft Internet Explorer 2.0 or higher and Netscape Navigator 2.0 
to 4.x. Netscape Navigator 6.0 does not support this option. 


Optimizing Dynamic Page Layout Output 


If you set a Layout or Layout Region to Dynamic Page Layout output, you can 
control the text ﬂow for each container by choosing the table formatting priority— 
columns or rows—that NetObjects Fusion uses to generate the page HTML. This 
helps to preserve your design if a browser’s font settings change the size of your 
text. 


For example, a Columns or vertical priority keeps text together in a vertical 
orientation when text size changes rearrange the page. 


The page with a Columns setting in 
Page view (at left) adjusts vertically 
to changes in browser text size, as 
shown at right 
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Selecting an HTML Output Method 


A Rows or horizontal priority keeps text together in a horizontal orientation when 
text size changes rearrange the page. 


You can make pages more efﬁcient and predictable by optimizing placement of 
objects within the site’s underlying table structure. As a general rule, it’s best to 
align objects to each other and to place text boxes in their own cells within the 
underlying table structure so they can resize as necessary in response to browser 
font changes. 


. 


To help determine the best alignment, you can preview the underlying table row and 
column structure to see if NetObjects Fusion can divide your Layout into cells 
efﬁciently or if you need to rearrange some objects. 


The page with a Rows setting in 
Page view (at left) adjusts 
horizontally to changes in browser 
text size as shown at right 


By staggering the text boxes and image objects, as shown in the diagram at left, you require 
NetObjects Fusion to create multiple tables with different sized columns. By aligning the page 
objects, as shown at right, you create a simpler underlying table structure for the page, which can 
result in better performance in Netscape browsers. 
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1. In Page view, select the Layout or Layout Region you want to preview. 


The General tab of the appropriate Properties palette appears. 


2. Select Columns or Rows in the HTML output section. 


3. Click and hold the Show button. 


NetObjects Fusion hides grid lines, guide lines, and object borders in the Layout 
and displays solid gray lines to show how the Layout is divided into rows and 
columns. 


4. Identify underlying table cells that contain multiple text boxes or other objects. 


5. Release the Show button. 


6. If row and column dividers do not separate objects the way you think they 
should, those objects might not be aligned with pixel-level accuracy. To correct 
this, Shift+Click all the objects you want to align. 


Show table 
structure button 
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Selecting an HTML Output Method 


The Multi-Object Properties palette appears. 


7. Click the alignment setting appropriate for the selected objects. 


8. Repeat steps 3 through 7 as needed. 


9. Preview the site or page. 


10. To test the results, reset your browser display fonts to a signiﬁcantly larger size 
and preview the site again. 


You can see a page’s table structure in the browser by holding down Shift when 
you click the Preview Site button. 


Optimizing AutoFrames 


If you are using Dynamic Page Layout, you can control realignment of AutoFrame 
content by selecting, for each frame, the table alignment setting that best preserves 
your design. When you use the Show button to preview the Layout’s table structure, 
the preview includes the table structure that NetObjects Fusion expects to use in 
AutoFrames. 


Locking or Maximizing a Text Box 


If all the objects on a page are embedded in a text box, you can apply three text box 
properties to reduce the impact of variations in browser conﬁgurations: locking the 
minimum size of a text box, sizing the text box to ﬁll the Layout, and wrapping the 
text box contents to the browser width. See Chapter 9, “Working with Text Boxes” 
for information about these options. 
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Publishing with Regular Tables 


When you choose Regular Tables, NetObjects Fusion translates each page Layout 
or Layout Region into a single HTML table with rows and columns, and places 
your content into table cells. If text content expands because of a browser font 
setting, its table row expands with it, and the content below it on the page is moved 
down. 


Regular Tables is recommended when you: 


✦ Want pages to display successfully in older versions of some browsers. 


✦ Use many tables or Layout Regions as containers and want to simplify the 
HTML output. 


✦ Include objects with actions on the page, and you choose not to use Fixed Page 
Layout as the output method. 


✦ Embed certain JavaScript code that will not work with Dynamic Page Layout. 


Publishing with Fixed Page Layout 


Pages published using Fixed Page Layout can only be viewed accurately in 
Microsoft Internet Explorer 4.0 or higher or Netscape Navigator 4.x browsers. 
Older browsers can view the pages, but with unpredictable results; in many cases 
the page content is stacked ﬂush left down the page. 


Fixed Page Layout uses cascading style sheet positioning, layers, or both to achieve 
a high level of layout accuracy. NetObjects Fusion determines which of these 
options are applicable based on how you set up Browser compatibility in the 
Current Site Options dialog. See “Setting the Site’s HTML Output Method” on 
page 97. 


When you choose Fixed Page Layout, NetObjects Fusion expresses the location of 
content in terms of absolute positioning. For example, instead of using HTML 
workarounds such as empty table rows and transparent .gifs to position a line of text 
below the top of the page, the absolute positioning supported by Fixed Page Layout 
deﬁnes placement of the text box a speciﬁc distance from the top left corner of the 
page in a simple statement of x,y coordinates. 


When you select Fixed Page Layout: 


✦ NetObjects Fusion generates HTML code that produces the same results in 
Microsoft Internet Explorer and Netscape Navigator 4.x. 
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Selecting an HTML Output Method 


✦ Pages are typically more compact and download faster than table-based HTML 
pages. 


✦ You can overlap objects in Layouts or Layout Regions. See “Layering Objects” 
on page 89. 


✦ You get consistent results with pages containing actions. See Chapter 23, 
“Building Dynamic Pages.” 


✦ There is some risk for text-rich pages. If a Fixed Page Layout page is viewed in 
a browser with large font settings, the text boxes expand without regard for 
other objects on the page, which can result in unplanned overlapping of objects. 


NOF7.5UG~1.BOO Page 104 Thursday, January 21, 1904 11:14 PM 


Chapter 7 
Controlling Published Output 


105 


Design Priorities and Method Choices 


Use this table to determine which combination of layout methods and HTML 
output methods best supports your site design priorities. 


If your priority is... 
Suggested container object 
Suggested HTML output 
method 


Lean HTML and fast browser loading 
Text box or Layout-sized table 
Dynamic Page Layout 


Precise placement control for objects 
Layout and/or Layout Region(s) 
Dynamic Page Layout 


Maximizing usability for site visitors 
with browsers earlier than version 4.0 


Text box sized to Layout 
Regular Tables 


Absolute control over minimum text 
box height 


Text box with size locked 
Dynamic Page Layout 


Precise placement control for selected 
content, but lean HTML otherwise 


Text box for page with embedded 
Layout Region for selected content 


Dynamic Page Layout 


Wrapping text around images and 
other objects 


Text box and/or table 
Dynamic Page Layout 


Overlapping selected objects 
Overlapped objects in Layout Region 
embedded in a text box 


Dynamic Page Layout for site; 
Fixed Page Layout for Layout 
Region containing 
overlapped objects 


Wrapping page to varying browser 
widths 


Text box sized to Layout with Contents 
wrapped to browser width 


Dynamic Page Layout 


Drag-and-drop placement of objects 
while designing the page 


Layout and/or Layout Region 
Dynamic Page Layout 


Horizontal or row-based content 
ﬂow such as spreadsheets or other 
tabular data 


Table 
Dynamic Page Layout 


Delivering objects with actions 
or other DHTML effects only to 
advanced browsers 


Layout 
Fixed Page Layout 


Delivering objects with actions 
or other DHTML effects to greatest 
number of browser versions 


Objects with actions in Layout Region 
embedded in a text box 


Dynamic Page Layout for site; 
Regular Tables for Layout 
Region containing objects 
with actions 


Using cascading actions 
Embedded Layout Regions containing 
objects with actions, grouped for cascading 
messages 


Dynamic Page Layout 
Fixed Page Layout 
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Design Priorities and Method Choices 
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Working with Layouts and 
Layout Regions 
8 


Layouts and Layout Regions are containers for the objects you place on your pages. 
When you use Layouts and Layout Regions you can position content with pixel- 
level precision by dragging it into place in the container. 


This chapter describes: 


✦ Working with Layouts 


✦ Creating Layouts 


✦ Working with Layout Regions 


✦ Creating Layout Regions 


✦ Setting the HTML output method for Layouts and Layout Regions 


✦ Setting the background of Layouts and Layout Regions 
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Working with Layouts 


Working with Layouts 


The Layout makes up the body of the page. It is surrounded on all four sides by the 
MasterBorder. Each Layout is attached to a single page, unlike a MasterBorder, 
which can be applied to any page in the site. There is no connection between 
Layouts on separate pages. 


Each page has a default Layout named PagenameLayout. For example, when you 
add a page, its page name is Untitled#. Until you rename that page, the default 
Layout is named Untitled#Layout. 


You can add multiple Layouts to a page, each with its own properties, design, and 
content. You might use several Layouts to prototype or publish several versions of 
the same page. You could also create separate Layouts for different versions of your 
site, such as English, French, media, and text-only. When you publish the site, 
NetObjects Fusion publishes each page using the currently selected Layout. 


The name of the currently selected Layout appears in the Layout drop-down list in 
the lower-left corner of Page view. 


You can control various characteristics of the Layout’s appearance in Page view. 
See “Setting Up the Page Design View Display” on page 75. 


You cannot delete a Layout. Objects in any Layout you create are always listed as 
In Use in Assets view, even if the Layout is not selected. 


Creating a New Layout 


1. In Page view, display the page for which you want to create a new Layout. 


2. Select Add from the Layout drop-down list. 


A new, blank Layout appears. Any content on the previous Layout is stored with 
that Layout. Each Layout you add is named PagenameLayout#. The number is 
incremented for each Layout you create for the page. To change the Layout 
name, see “Renaming a Layout” on page 109. 


Layout drop-down list 


Current Layout 
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3. Add objects to the Layout and modify the Layout properties—such as size, 
background, or HTML output options. 


Selecting a Layout 


To display a different Layout for a page: 


➲ In Page view, select a Layout from the Layout drop-down list. 


Renaming a Layout 


1. In Page view, select a Layout from the Layout drop-down list. 


The General tab of the Layout Properties palette appears. 


2. Enter a new name in the Layout name ﬁeld. 


Use letters and numbers only; Layout names cannot have spaces, hyphens, 
underscores, or other special characters, and they cannot begin with a number. 


The name of the Layout changes and the Layout drop-down list is updated. 


You can also use the Object Tree palette to change the name of the Layout. See 
“Renaming an Object” on page 86. 
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Working with Layout Regions 


Changing Layout Size 


You can set Layout size by entering speciﬁc measurements on the Layout 
Properties palette or by dragging the Layout handles. See “Setting Page Size” on 
page 77. 


To reduce the amount of white space in the Layout area: 


➲ In Page view, from the Object menu, select Size Layout to Objects. 


Adding an Object to the Layout 


The Layout is the default container for the page, and can contain any object. To 
place objects in a Layout, you can: 


✦ Select the appropriate tool and create an object within the Layout. 


✦ Paste an object into the Layout from the Clipboard. 


✦ Drag and drop any object that you previously placed with a tool. 


Working with Layout Regions 


A Layout Region is a container you use to group objects in a deﬁned area on the 
page. Layout Regions are page segments that you can place, size, and control 
independently from the rest of the Layout. 


There are ﬁve key aspects to using Layout Regions: 


✦ When you move a Layout Region on the page, its embedded objects move with 
it and maintain their positions relative to each other and the Layout Region. 


✦ You can send cascading action messages to the Layout Region, and it will pass 
the message to all objects embedded within it. See Chapter 23, “Building 
Dynamic Pages.” 


✦ You can embed a Layout Region within a text box. This gives you position- 
based placement of the objects within the Layout Region, while the rest of the 
page is arranged in a text-based layout. 


✦ You can assign an HTML output method to a Layout Region independent of the 
method used for its parent Layout. See “Setting the HTML Output Method for a 
Layout or Layout Region” on page 113. 


✦ You can designate a Layout Region as a form and embed form objects within it. 
See Chapter 25, “Designing and Implementing Forms.” 
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Layout Regions deﬁne an HTML table. If you use many Layout Regions, or nest 
Layout Regions, it increases the size of the page’s HTML ﬁle and slows page 
rendering in your site visitor’s browser. 


Creating a Layout Region 


Layout Region tool 


1. In Page view, select the Layout Region tool from the Container ﬂyout on the 
Standard toolbar. 


2. Draw a Layout Region on the Layout. 


3. Position and size the Layout Region, just as you would position any other 
object. 


4. Add objects to the Layout Region. 


Adding Objects to a Layout Region 


Like a Layout, a Layout Region can contain any object: text, pictures, media, or 
even other Layout Regions. To add objects to a Layout Region: 


✦ Select the appropriate tool and create an object within the Layout Region. 


✦ Drag objects into the Layout Region from elsewhere on the page. 


✧ To make the Layout Region expand as needed to contain the object, drag the 
object into the Layout Region. 


✧ When the Layout Region border changes to a thick blue outline, the object is 
contained in the Layout Region. 


✦ To drag an object over a Layout Region without embedding it, hold down Alt as 
you drag the object. 


Displaying the Layout Region Grid 


To make it easier to place objects precisely in the Layout Region, you can use a 
local alignment grid that is independent from the grid displayed within the Layout. 


To display and modify the Layout Region grid: 


1. In Page view, select the Layout Region. 
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Working with Layout Regions 


The General tab of the Layout Region Properties palette appears. 


2. Select Grid if necessary. 


3. Enter values for the width and height of the local grid. The Layout Region grid 
always displays in pixels. 


Converting a Layout Region to a Table 


To see the underlying table structure, you can convert a Layout Region into a table. 
NetObjects Fusion constructs a table and places objects in the same position they 
occupied in the Layout Region. 


1. Right-click the Layout Region and choose Convert Layout Region to Table 
from the shortcut menu. 


The Convert Region to Table dialog appears. 


2. Choose how you want NetObjects Fusion to process empty cells. Select: 


✦ 
Leave as individual cells to skip empty cells. 


✦ 
Span in rows to merge cells in row order. 


✦ 
Span in columns to merge cells in column order. 
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Setting the HTML Output Method 
for a Layout or Layout Region 


You can select the HTML output method that determines the type of HTML code 
NetObjects Fusion produces for the current Layout or Layout Region. This HTML 
method is independent of the method used to publish the parent container. 


For example, if a Layout Region is placed in a Layout area, you can set the region 
to a different HTML output method than the one used for the Layout area. When 
you publish, the Layout area is published using its setting and the Layout Region is 
published using its setting. See “Design Priorities and Method Choices” on 
page 105. 


1. In Page view, click the Layout or Layout Region. 


The General tab of the Properties palette appears. 


2. In the HTML output section of the General tab, select the HTML output method 
you want from the drop-down list. 


✦ 
Site Setting generates the Layout using the output method speciﬁed for the 
entire site. To change this setting, from the Tools menu, choose Site Settings 
and change the Browser compatibility setting. 


Parent Setting generates the Layout Region using the output method 
speciﬁed for the object that contains it. For example, if a Layout is set to 
Dynamic Page Layout, that is the parent setting for a Layout Region 
contained in that Layout. 


✦ 
Dynamic Page Layout uses nested HTML tables to achieve the highest level of 
layout accuracy across browsers. If you select this option, you can set the 
table formatting preference. See “Publishing with Dynamic Page Layout” 
on page 99. 


For Layouts 
For Layout Regions 
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Setting Layout and Layout Region Background Properties 


✦ 
Regular Tables uses a single table to place objects on the page. See 
“Publishing with Regular Tables” on page 103. 


✦ 
Fixed Page Layout uses cascading style sheet positioning and layers to 
optimize your site in Microsoft Internet Explorer 4.0 and above and 
Netscape Navigator 4.x. See “Publishing with Fixed Page Layout” on 
page 103. 


The method you select for the Layout affects the entire page, including the 
MasterBorder and frames you assign to that MasterBorder. 


Setting Layout and Layout Region 
Background Properties 


You can control the appearance of each Layout and Layout Region by setting 
background properties. You can assign a background color and place an image in 
the background of a Layout or Layout Region. You can attach a background sound 
to a Layout that plays when a visitor views the page. 


1. In Page view, select the Layout or Layout Region. 


The General tab of the Properties palette appears. 


2. Select the Background tab. 


3. In the Color ﬁeld, select: 


✦ 
Automatic to set the background to the background color speciﬁed by the 
Layout’s current SiteStyle or the Layout Region’s parent object. 
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✦ 
Transparent to eliminate the background color of a Layout. This option is not 
available for a Layout Region. 


✦ 
Color to select a background color from the Color Picker. The selected color 
appears in the box to the right of the Color ﬁeld. To change the color, click 
the box and select a new color from the Color Picker. 


4. In the Image ﬁeld, select: 


✦ 
Automatic to set the background to the image speciﬁed by the Layout’s 
current SiteStyle or the Layout Region’s parent object. 


✦ 
None to eliminate the background image of a Layout. This option is not 
available for a Layout Region. 


✦ 
Browse to select an image from the Open dialog. See “Choosing an Image 
Format” on page 182. If the picture is smaller than the Layout or Layout 
Region, the browser tiles the image. To change the image, click the Browse 
button to the right of the ﬁeld. 


5. To assign a sound to a Layout that plays when a site visitor views the page: 


a. Select Sound. In the Background Sound dialog, click Browse and select a 
sound ﬁle from your hard disk or LAN. 


You can use sound ﬁles in .au, .aiff, .midi, .ram, or .wav formats. 


b. To repeat the sound while the page is open, select Continuous Loop. 


c. 
Click OK. 


The selected sound plays when you preview the page. 


Note: Site visitors must have a sound board, speakers or headphones, and a 
browser that supports background sounds installed on their computers to 
hear background sound. To preview and test sounds, your system must also 
be appropriately conﬁgured. Some sound formats also require support from 
the Web server. See “Inserting a Sound File” on page 336. 
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Setting Layout and Layout Region Background Properties 
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Working with Text Boxes 
9 


A text box is a container for text as well as other kinds of objects, including 
pictures, sound objects, and tables. When you use a text box as a container, you do 
not have pixel-level control over embedded objects. For example, you do not insert 
a picture in a text box and drag it into position. Instead, you embed the object at a 
selected point in the text and adjust its placement using alignment, positioning, and 
text-wrapping choices. When NetObjects Fusion publishes pages that use a text box 
as the main Layout container, they have extremely lean HTML code and load 
relatively quickly in the site visitor’s browser. 


This chapter describes: 


✦ Adding a text box 


✦ Selecting a text box 


✦ Embedding objects in a text box 


✦ Wrapping text around objects 


✦ Sizing a text box 


✦ Setting text box background 


✦ Scaling text box contents to the browser window 


✦ Preserving your design intentions 
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Adding a Text Box 


Adding a Text Box 


Text tool 


1. Select the Text tool from the Standard toolbar. 


2. Drag a box in the location where you want to place the text box. 


The text box appears with hollow selection handles indicating you can enter and 
format text. See Chapter 12, “Designing with Text.” 


Selecting a Text Box 


✦ To add or edit text within a text box, double-click in the text box. The text box 
selection handles are hollow, and the Text Properties palette includes a Format 
tab in addition to the Text Box and Actions tabs. 


✦ To work with a text box as a container, click the text box. The selection handles 
are solid, and the Text Properties palette displays only Text Box and Actions 
tabs. 
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To add and format text, see Chapter 12, “Designing with Text.” 


Embedding Objects in a Text Box 


When you embed an object in a text box, a wide border appears around the box and 
the insertion point appears as a vertical bar. 


The insertion point indicates where the object’s HTML tags are inserted when 
NetObjects Fusion generates the HTML. 


Insertion marker 


NetObjects Fusion positions pictures at the insertion point. Text, tables, sound, 
video, and other objects are placed with the top edge lined up with the top edge of 
the text line containing the insertion point. You use the object’s alignment options to 
arrange the object within the text box. An insertion marker indicates the object’s 
insertion point. 


Text box with wide border 


Insertion point 


Insertion marker 


Embedded image aligned with 
Left wrap setting 
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Embedding Objects in a Text Box 


To move an embedded object, drag it. To place an embedded object on the top line 
of the text box, drag it until its insertion marker is positioned before the ﬁrst text 
character. 


You can create a new object in a text box or insert an existing object. 


Dragging and Dropping an Existing Object 


1. In Page view, select the Text tool from the Standard toolbar and draw a text box. 


2. Add text. See Chapter 12, “Designing with Text.” 


3. Select an object elsewhere on the page and drag it into the text box. 


The thick blue text box boundary indicates the object will be embedded. 


4. Position the insertion point at the place in the text where you want to insert the 
object and drop the object. 


5. Position the object within the text box. See “Wrapping Text around Objects” on 
page 121. 


Creating a New Embedded Object 


1. In Page view, select the Text tool from the Standard toolbar and draw a text box. 


2. Add text. See Chapter 12, “Designing with Text.” 


3. Select the appropriate tool to create the new object. 


Note: To embed a text box within a text box, you must create it outside the text box 
and drag it into place. 


4. Position the mouse pointer in the text and draw a box for the new object. 


Insertion marker positioned 
before the ﬁrst text character 


Embedded image aligned 
with Left wrap setting 
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If appropriate, the Open ﬁle dialog for that type of object appears. Select the 
object you want to embed and click OK. 


5. Position the object within the text box. See “Wrapping Text around Objects” on 
page 121. 


Wrapping Text around Objects 


Once you embed an object in a text box, you can wrap text around it. 


1. In Page view, select the object embedded in the text box. 


The object’s properties palette appears. 


2. Click the Align tab. 


3. Set the alignment options. 


Depending on the type of object you selected, NetObjects Fusion displays some 
combination of the following alignment options: 


✦ Vertical alignment of the object to the top, middle, or bottom of the text line. 


✦ Horizontal alignment of the object to the left, center, or right of the text box, 
without text wrapping. 


✦ Horizontal alignment of the object to the text box, with text wrapping. If you 
select Left wrap, the text wraps around the right side of the object; if you 
select Right wrap, the text wraps around the left side of the object. To embed 
the object at the top left of the text box, move the pointer to the beginning of 
the text. 
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Sizing a Text Box 


✦ In the Space around object section, specify the amount of vertical and 
horizontal space you want to leave between the image and the text. 


The text wraps around the object according to your speciﬁcations. 


Sizing a Text Box 


When you create or select a text box, you can control its width, the minimum 
height, and the scaling of the text box to the full width of the Layout area or the 
browser window. 


1. In Page view, select a text box or add a new text box. 


The Text Properties palette appears. 


2. Click the Text Box tab if necessary. 


3. To set the width of the text box, select it and drag the handles to size the text box 
as needed. The text box retains the width you set unless you size it to the Layout 
area as described in step 5. 


4. To set a minimum height for the text box, select Lock height and drag the text 
box handles to the minimum height you want. 
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If Lock height is not selected, NetObjects Fusion automatically adjusts the 
height of a text box to ﬁt the text and objects it contains. Selecting Lock height 
prevents the text box from getting smaller in the site visitor’s browser. 


5. To use a text box as the main Layout container on the page, select Size Layout 
to Text. This results in extremely lean HTML code. 


Before you do this, embed all objects in the Layout area in the text box or place 
them in the MasterBorder. Objects left in the Layout area outside the text box 
will be overlapped by the text box when you size it to the Layout. Unless you 
want this overlap—and use Fixed Page Layout HTML output to support it—you 
must embed, move, or remove the objects. 


Setting Text Box Background 


You can add colors and pictures to text box backgrounds. If you choose a .gif with a 
transparent color, the text box background color will show through. 


1. In Page view, select the text box and click the Text Box tab on the Text 
Properties palette. 


2. In the Color ﬁeld, select: 


✦ 
Automatic to set the background to the color speciﬁed in the Text Object 
style in Style view. 


✦ 
Transparent to set the background to the background color speciﬁed by the 
parent object of the text box. For example, if a small text box is embedded in 
a larger text box with a red background, the small text box will also have a 
red background if Transparent is selected. 


✦ 
Color to select a background color from the Color Picker. The selected color 
appears in the box to the right of the Color ﬁeld. To change the color, click 
the box and select a new color from the Color Picker. 


3. In the Image ﬁeld, select: 


✦ 
Automatic to set the background to the image speciﬁed in the Text Object 
style in Style view. 


✦ 
None to eliminate the background image. 
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Creating Pages that Resize to the Browser Window 


✦ 
Browse to select an image from the Open dialog. See “Choosing an Image 
Format” on page 182. If the picture is smaller than the text box, the browser 
tiles the image. To change the image, click the Browse button to the right of 
the ﬁeld. 


Creating Pages that Resize to the Browser Window 


You can conﬁgure NetObjects Fusion so the text box is maximized in the site 
visitor’s browser window. When you use this option, NetObjects Fusion generates 
the page’s HTML without using tables. 


1. In Page view, click the MasterBorder. 


The MasterBorder Properties palette appears. 


2. Select the ZeroMargins MasterBorder from the MasterBorder name drop-down 
list or use any combination of AutoFrames and non-framed MasterBorders with 
margins set to zero. 


3. Select an existing text box or create a new one and embed all objects in the 
Layout area in the text box. 
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4. On the Text Box tab of the Text Properties palette, select Size Layout to Text 
and then Contents wrap to browser width. 


When you publish this page, the contents of the text box adjust to the size of the 
browser window. 


If you select Size 
Layout to Text and 
Contents wrap to 
browser width... 


...when you publish 
the page, the 
contents of the text 
box adjust to the 
size of the browser 
window 
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Preserving Your Design Intentions 


Preserving Your Design Intentions 


When you place a text box on a page, the text is shown in the default display font. 
You format the text and position the text box relative to other objects on the page. 


When you preview or publish the page and view it in your browser, the size of the 
text box and its alignment with the objects around it are controlled by the font 
settings in the browser. If your NetObjects Fusion default browser font is 10-point 
Times Roman, and your browser default font is set to 14-point Arial, you see an 
immediate difference in the arrangement and spacing of objects, because text boxes 
expand to accommodate the new font size. 


This font variation is not caused by NetObjects Fusion; it’s a consequence of site 
visitors controlling their browser environment. You can avoid potential problems by 
viewing the page in a variety of browsers using different font sizes and then 
adjusting your design to accommodate these changes. See Chapter 7, “Controlling 
Published Output” and Chapter 8, “Working with Layouts and Layout Regions” for 
more information about browsers. 


Browser view at 14-point Arial 


Page view at 
10-point Times Roman 
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Managing MasterBorders 
10 


NetObjects Fusion divides a page into the Layout area and the MasterBorder area. 
The MasterBorder contains objects that repeat on a set of pages. You can place 
anything in a MasterBorder that you can place in the Layout, including banners, 
pictures, and text. By placing navigation bars in a MasterBorder you can give pages 
with the same navigational needs the same navigational structure. 


You can create a MasterBorder and apply it to all the pages in your site or just to 
selected pages. A site can use more than one MasterBorder. When you modify a 
MasterBorder, NetObjects Fusion automatically makes the change on every page 
that shares the MasterBorder. 


This chapter describes: 


✦ Modifying a MasterBorder 


✦ Creating a MasterBorder 


✦ Changing MasterBorders 


✦ Applying a MasterBorder to pages 


✦ Renaming a MasterBorder 


✦ Deleting a MasterBorder 
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Working with MasterBorders 


Working with MasterBorders 


The MasterBorder is the set of margins—top, bottom, left, and right—on the page. 


By default, the left, right, and bottom margins are separated from each other by an 
outline. The lack of an outline between the left margin and the top margin indicates 
objects can straddle that boundary. 


All pages have a MasterBorder. If no MasterBorder is visible, either the 
MasterBorder display is turned off on the View menu, or the assigned MasterBorder 
has all margins set to zero, like the ZeroMargins MasterBorder included with 
NetObjects Fusion. You can change the size of any MasterBorder margin, even 
those set to zero. See “Modifying the Current MasterBorder” on page 129. 


When you create a new site, NetObjects Fusion creates a default MasterBorder that 
contains three navigation aids—a banner showing the page name at the top, a 
button navigation bar on the left, and a text navigation bar on the bottom. As you 
add levels to the SiteStructure, you can set navigation bar options to provide site 
visitors with appropriate access to all pages. See “Setting Navigation Bar Type” on 
page 268. 


If you do not want to include the default banner and navigation bars in your site, 
you can delete them or select the ZeroMargins MasterBorder. 


Top margin 


Left margin 


Right margin 


Bottom margin 
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Selecting a MasterBorder 


➲ In Page view, click an empty space inside the MasterBorder. If the page has the 
ZeroMargins MasterBorder, click in the gray area outside the page. 


Modifying the Current MasterBorder 


1. In Page view, select the MasterBorder. 


The MasterBorder Properties palette appears. The Name ﬁeld shows the name 
of the MasterBorder assigned to the current page. 


If the MasterBorder Properties palette does not appear, check the View menu to 
make sure the MasterBorder display and the properties palette are turned on. 


This page has a visible MasterBorder. 
Click inside it 
This page has the ZeroMargins MasterBorder. 
Click outside the page 
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Modifying the Current MasterBorder 


2. To change the size of the margins, drag the handles on the ruler. 


If an object is in the way—such as a banner occupying the top and left margin— 
you must move the object to resize the MasterBorder. If the MasterBorder is not 
visible, you cannot drag the handles. 


For precise margin settings, in the Margins section of the MasterBorder 
Properties palette, type values into the ﬁelds or click the arrows. 


3. Arrange objects such as a banner or navigation buttons, delete unwanted 
objects, and insert additional text or objects. 


4. If conserving browser window space is important to you, when the objects are 
arranged to your satisfaction, from the Object menu, choose Size MasterBorder 
to Objects. This shrinks the MasterBorder to the minimum size required to 
display the objects it contains, but it may also affect your page design. 


Drag these handles 
to change the 
MasterBorder size 


MasterBorder margins before and after being 
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Creating a MasterBorder 


1. In Page view, select the MasterBorder. 


The MasterBorder Properties palette appears. The Name ﬁeld shows the name 
of the MasterBorder assigned to the current page. 


2. Click the Add/Edit button. 


The Edit MasterBorder List dialog appears displaying a list of all the 
MasterBorders in the site. The current MasterBorder is selected. 


3. To add a MasterBorder, click Add. 


The New MasterBorder dialog appears. 


4. Type a name for the new MasterBorder, select an existing MasterBorder to base 
it on, and click OK. 


Click to create a new MasterBorder 


Click to add a MasterBorder 
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Changing MasterBorders 


You cannot include spaces in the MasterBorder name. You cannot begin the 
MasterBorder name with a number. 


NetObjects Fusion creates a new MasterBorder based on the selected 
MasterBorder and makes it the current MasterBorder for that page. To apply the 
new MasterBorder to other pages, see “Applying a MasterBorder to Multiple 
Pages” on page 133. 


5. Continue working on the MasterBorder by following the steps in “Modifying 
the Current MasterBorder” on page 129. 


Changing MasterBorders 


1. In Page view, display the page where you want to apply a different 
MasterBorder. 


2. Click in the MasterBorder to display the MasterBorder Properties palette. 


3. Select the MasterBorder you want from the Name drop-down list. 


The margins of the page now display the contents of the selected MasterBorder. 


You can change the MasterBorder of a single page or a group of pages in Site view. 
See “Applying a MasterBorder to Multiple Pages” on page 133. 


Type a name for the new MasterBorder 


Select a MasterBorder to base the new one on 
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Applying a MasterBorder to Multiple Pages 


You can apply a MasterBorder to several pages at one time in Site view. 


1. In Site view, select the pages to which you want to apply the new MasterBorder. 
See “Working with a Group of Pages” on page 35. 


The selected pages are listed at the bottom of the Properties palette. 


2. Make sure MasterBorder is displayed in the ﬁrst Property ﬁeld. 


3. Select the MasterBorder you want from the second Property drop-down list. 


4. Click Set on all to apply the MasterBorder to all selected pages. 


To apply the MasterBorder to an individual page, select the page, then select the 
MasterBorder you want to apply. You cannot undo this action; to restore the original 
MasterBorder, you must reassign it. 


Renaming a MasterBorder 


1. In Page view, click in the MasterBorder to display the MasterBorder Properties 
palette. 


2. Click Add/Edit. 


3. In the Edit MasterBorder List dialog, select the MasterBorder you want to 
rename and click Rename. 


Note: You cannot rename the ZeroMargins MasterBorder. 
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Deleting a MasterBorder 


4. In the Rename MasterBorder dialog, type a new name and click OK. 


5. Click Close. 


The new MasterBorder name now appears in the Edit MasterBorder List dialog 
and in the drop-down list in the MasterBorder Properties palette. 


Deleting a MasterBorder 


MasterBorders that are not in use retain their assets and are stored and tracked by 
NetObjects Fusion. When you import a template, MasterBorders included with the 
template are added to the list of MasterBorders for the site. To avoid duplication, it 
is important to delete MasterBorders that are listed but not used in the site. 


1. In Page view, click in the MasterBorder to display the MasterBorder Properties 
palette. 


2. Click Add/Edit. 


3. In the Edit MasterBorder List dialog, select the MasterBorder you want to 
delete and click Delete. 


4. Click Yes to conﬁrm deletion. 


If you delete a MasterBorder that is in use, the ZeroMargins MasterBorder is 
assigned to those pages. 
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Working with AutoFrames 11 


AutoFrames permit site visitors to scroll the body of the page while objects in the 
AutoFrame, such as navigation buttons, remain in view. You can set any or all of the 
MasterBorder margins as an AutoFrame. 


This chapter includes: 


✦ Understanding frames 


✦ Adding AutoFrames 


✦ Setting frame properties 


✦ Targeting links in AutoFrames 
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Understanding Frames 


Frames are an HTML mechanism you can use to subdivide the browser window 
into independent areas. When a site visitor scrolls the Layout, the frame doesn’t 
scroll with it, so you can keep navigation buttons in view at all times. Frames can 
also reduce the amount of refreshing required by your visitor’s browser. 


MasterBorder 
applied to 
site’s Home page 


Left border is an 
AutoFrame with a 
picture in the 
background 


Browser redraws only 
the content of the 
Layout area when a 
site visitor uses a link 
to a child page 
sharing the same 
MasterBorder and 
frame 
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Each frame displays its own content, which can include links, a form, regions, or 
any text, graphic, or media objects. Links within a frame can display a page, or 
display information in the same frame or a different frame. You can deﬁne targets 
for the links contained in one frame so they retrieve content into another frame. 


A special type of HTML page—called a frameset—establishes the combination of 
frames and frame properties that make up the browser window display. The 
frameset speciﬁes the number of frames, deﬁnes their size and placement, and 
speciﬁes the pages or resources that make up their original or default content. 


NetObjects Fusion supports two ways of creating frames. 


✦ You can use the Properties palette in Page view to set AutoFrames and add 
navigation controls, banners, text, graphics, links, and scroll bars. An 
AutoFrame frameset contains a body frame for the Layout area of the page and 
frames for one or more of the MasterBorder margins: Left, Right, Top, Bottom. 
An AutoFrame frameset cannot have more than these ﬁve frames and they must 
be in the speciﬁed positions. 


✦ If you require more than ﬁve frames or frames in different positions, you can 
manually code frames using HTML. See “Examples of Page and AutoFrame 
HTML” on page 457. 


Although Netscape Navigator and Microsoft Internet Explorer support frames, not 
all browsers do. If you use frames, you might want to consider creating an alternate 
site for visitors with browsers that do not support frames. See “Accommodating 
Browsers that Don't Support Frames” on page 459 and “Directing Visitors to a 
Browser-Speciﬁc Page” on page 421. 


Within a frame, you can inﬂuence how variations in browser fonts affect your 
design. The Rows and Columns properties work within a frame the same way they 
work within a Layout. For information, see “Optimizing Dynamic Page Layout 
Output” on page 99. 
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Adding an AutoFrame 


Adding an AutoFrame 


When you add AutoFrames, NetObjects Fusion applies them to the current 
MasterBorder and all pages that use that MasterBorder. Before you add 
AutoFrames, you might want to select or create a designated “framed” 
MasterBorder that you can apply to the appropriate pages. To apply different 
framesets to different pages, you’ll need one MasterBorder for each frameset. As 
you develop these MasterBorders, follow these guidelines: 


✦ Objects in frames can’t straddle frame boundaries, so check the corners of your 
page before you add AutoFrames. For example, if you have a banner across the 
top of the page that overlaps the left and top borders, resize it or move it before 
you turn on AutoFrames for either border. 


✦ To avoid scroll bars displaying when you don’t need them, add a little extra 
room to margins you’re going to set as frames or turn off scroll bars on the 
Frame Properties palette. See “Setting Frame Properties” on page 141. 


See “Creating a MasterBorder” on page 131 if you need help creating a 
MasterBorder. 


To set a MasterBorder margin as an AutoFrame: 


1. In Page view, click an empty space inside the MasterBorder, or in the gray area 
outside the page. 


The MasterBorder Properties palette appears. 


2. Click the AutoFrames tab. 
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3. Click the button for each margin you want to set as a frame—Left, Right, Top, 
or Bottom. 


NetObjects Fusion adds a label—Left, Right, Top, or Bottom—to indicate a 
frame. In addition to the frame you select, the Layout area also becomes a 
frame. 


If you add frames to more than one margin, the selection sequence is important 
because frames overlap each other in the order in which you add them. You can 
change the overlap sequence by clearing the AutoFrame option for all margins 
and then reselecting them in a different sequence. 


The left margin is 
set as an AutoFrame 


The left frame 
was selected, 
followed by the 
bottom frame, as 
indicated by the 
numbers on the 
AutoFrames tab. 
As a result, the 
left frame 
extends the full 
height of the 
page 
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Generating HTML Frame Borders 


Keep in mind that because enabling AutoFrames makes your page consist of at least 
three HTML pages, it can slow page loading. 


Generating HTML Frame Borders 


If you want site visitors to be able to resize the frame, on the AutoFrames tab of the 
MasterBorders Properties palette, select Generate HTML frame borders. 


To set frames to be borderless in the site visitor’s browser, clear Generate HTML 
frame borders. NetObjects Fusion turns off the borders for all frames in that 
MasterBorder. 


To combine frames with borders and frames without borders on the same page, you 
must script the frames. See “Examples of Page and AutoFrame HTML” on 
page 457. 


The bottom 
frame was 
selected ﬁrst, 
followed by the 
left frame. The 
bottom frame 
extends the full 
width of the 
page 
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Setting Frame Properties 


1. In Page view, click the frame label or right-click in the frame and select Frame 
properties from the shortcut menu. 


The Frame Properties palette appears. 


You cannot change the name of the frame. 


2. Select a User scrollable option: 


✦ 
Yes. The browser always displays vertical and horizontal scroll bars in the 
frame, whether needed or not. 


✦ 
No. The browser never displays scroll bars, even if needed to display all 
objects in the frame. If the page content is larger than the frame itself, site 
visitors cannot see the entire page. 


Due to the nature of browsers, links to anchors on a frame do not work if 
User scrollable is set to No. 


✦ 
Auto. The browser displays scroll bars if the size of the page content requires 
them. 


3. Select User resizeable frame so site visitors can resize the frame. 


HTML frame borders must be visible so site visitors can drag them to specify a 
new size. If User resizable frame is not available, return to the AutoFrames tab 
and select Generate HTML frame borders. 


4. Clear Enable margin padding if you want to place objects at the frame border 
with no spaces. 
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Setting Frame Properties 


Some browsers cut off content that does not have additional padding. Preview 
your page in several browsers to make sure it appears as you intended. 


5. If you are publishing using the Dynamic Page Layout or Regular Tables HTML 
output method, choose the most efﬁcient table structure—columns or rows. If 
you are publishing using Fixed Page Layout, this setting has no effect. See 
Chapter 7, “Controlling Published Output.” 


6. Click the Background tab and in the Color ﬁeld, select: 


✦ 
Automatic to set the frame background to the color speciﬁed by the current 
SiteStyle. 


✦ 
Transparent to eliminate the background color. 


✦ 
Color to select a background color from the Color Picker. The selected color 
appears in the box to the right of the Color ﬁeld. To change the color, click 
the box and select a new color from the Color Picker. 


7. In the Image ﬁeld, select: 


✦ 
Automatic to set the background to the image speciﬁed by the current 
SiteStyle. 


✦ 
None to eliminate the background image. Use this setting to remove the 
SiteStyle’s background image from the frame. 


✦ 
Browse to select an image from the Picture File Open dialog. See “Choosing 
an Image Format” on page 182. If the picture is smaller than the frame, the 
browser tiles the image. If you select a picture with a transparent color, the 
background color shows through. To change the image, click the Browse 
button to the right of the ﬁeld. 


You can add an action to a frame using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 
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Targeting Links in AutoFrames 


When a site visitor clicks a link placed within a frame, the browser has to know 
where to display the results. The frame that displays the retrieved content is the 
target of the link; when you specify which frame is to display the results of a link, 
you are targeting that frame. 


1. In Page view, select the object or text that you want to link. 


The object’s properties palette appears. 


2. Click the Link tool on the Standard toolbar. 


The Link dialog appears. 


3. Select the type of link you are targeting: Internal Link, Smart Link, External 
Link, or File Link and set up the link. See Chapter 19, “Creating Links and 
Anchors.” 


4. In the Target area, click Existing and from the drop-down list choose the target 
frame in which you want to display the linked information. 


In this example, body and LeftFrame refer to the two frames on the current 
page. The other four choices are standard targets that are always available. See 
“Setting Link Targets” on page 295. 


You may not need to assign a target. NetObjects Fusion automatically targets 
most internal links for you. 


5. Click Link to close the dialog and create the link. 


6. Preview the page to test your targeted links. 


Targeted links in framesets do not load the URL of the page into the browser 
Location input ﬁeld. The browser sees the URL of the frameset, so title and location 
information about the page reﬂect the frameset rather than the page’s content. 
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AutoFrames and Browser Refresh 


AutoFrames and Browser Refresh 


When a site visitor clicks an untargeted link in a frame you created with 
AutoFrames, the browser either refreshes the entire page or only the content of the 
Layout area. This doesn’t affect the appearance of the page, but for performance 
reasons you might not want the browser to refresh the entire page unnecessarily. 


✦ The browser refreshes the entire window if a framed MasterBorder contains a 
dynamic object, such as a banner or highlighted navigation button. The dynamic 
object, by deﬁnition, changes from page to page, so the browser has to load the 
new page. Rollover buttons do not change from page to page, so they do not 
affect the page refreshing. 


✦ The browser exits the frameset and displays the retrieved resource in the full 
browser window if the link retrieves a page with a different MasterBorder or an 
external HTML page. 


If neither condition exists, the browser refreshes the body frame even if no target is 
assigned. 


For additional information about AutoFrames and browser refreshing, go to 
www.netobjects.com/support and click the Workbench link. 
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Designing with Text 
12 


Text is the primary tool for delivering your message. You can type text onto your 
pages, add it to pictures and shapes, and format it for maximum impact. NetObjects 
Fusion includes powerful features that allow formats to ﬂow from one design level 
to another, for example from a SiteStyle to selected text. You can also create and 
apply text styles to keep your site design consistent. 


This chapter describes: 


✦ Adding text to a page 


✦ Formatting text 


✦ Working with text styles 


✦ Creating and formatting lists 


✦ Inserting symbols 


✦ Adding text to a shape or picture 


✦ Creating and editing ﬁelds 


✦ Checking spelling 


✦ Finding text 


✦ Replacing text 


✦ Counting words, lines, paragraphs, and characters 
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Adding Text to a Page 


Adding Text to a Page 


To add text to a page, you can use the Text tool, drag and drop text from another 
application, paste text from the Clipboard, or import text. In each case, the text is 
placed in a text box. See Chapter 9, “Working with Text Boxes.” 


When you add text to a page, it’s a good idea to add all your text and then go back 
and apply formatting. 


Using the Text Tool 


Text tool 


1. In Page view, select the Text tool from the Standard toolbar and draw a text box 
on the page. 


A text box and the Text Properties palette appear. Hollow selection handles 
indicate the text box is in text editing mode. 


2. Type or paste text into the box. 


The text automatically wraps to the width of the box. 


To force a line break, position the insertion point at the end of the line and press 
Shift+Enter. 


3. Click outside the text box to deselect it. 


The text box sizes vertically to the text you enter. 
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Dragging and Dropping a Text File 


1. In Windows Explorer, locate the text ﬁle you want to add to the page. 


Note: You cannot drag and drop Word 2000 .doc ﬁles. You can drag and drop Word 
97.doc ﬁles, but you will get better results if you import them. See 
“Importing a Microsoft Ofﬁce Document” on page 70. 


2. Drag the ﬁle onto the page. 


The text appears on the page in a text box. 


Pasting Text from the Clipboard 


1. Cut or copy the text from the original source, such as a word processing 
document. 


2. In Page view, click where you want to position the text. 


3. From the Edit menu, choose Paste or Paste Special. Select: 


✦ Paste to paste the contents of the Clipboard onto the current page. You might 
lose some of the original text formatting when you copy and paste text from 
the Clipboard. 


✦ Paste Special to retain formatting. You can select: 


✧ Formatted Text (RTF) to insert the contents of the Clipboard as text with 
font and table formatting. 


✧ Unformatted Text to insert the contents of the Clipboard as text with no 
formatting. 


✧ HTML Format to insert the contents of the Clipboard as HTML format. 


To select the Paste Special default, click Set Paste Default and choose one of the 
three options. 
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Formatting Text 


Formatting Text 


You can format selected text using the options on the Text Properties palette or by 
applying formats to entire paragraphs. The Automatic setting, which is a choice for 
many options throughout NetObjects Fusion, allows formats to ﬂow from one 
design level to another. See “Formatting Selected Text” on page 150, “Formatting 
Paragraphs” on page 152, and “Understanding the Automatic Setting” on page 149. 


To apply many text attributes at once in a consistent manner, you can use the Styles 
included with NetObjects Fusion and also create and apply your own text styles. 
See “Working with Text Styles” on page 160. 


Selecting HTML or Cascading Style Sheet Text Formatting 


NetObjects Fusion provides two ways to generate the code that controls the format 
of the text in your site—HTML or cascading style sheets (CSS). 


When you select HTML (the default), NetObjects Fusion uses standard HTML tags 
in the code that controls text formatting. This results in consistent text display 
across browsers, from older 2.0 and 3.0 versions to the most recent versions of 
Microsoft Internet Explorer and Netscape Navigator. Using this setting also ensures 
that you can update sites created with earlier versions of NetObjects Fusion. 


Cascading style sheets provide a way for site designers to incorporate typographical 
elements—like line spacing and letter spacing—that are not supported by standard 
HTML in their sites. These styles are speciﬁed in .css ﬁles, which are attached to 
the site. When you select cascading style sheet text formatting, NetObjects Fusion 
creates style.css and site.css ﬁles and links them to the HTML generated for the 
site. 


The CSS standard is still evolving. Cascading style sheets do not work with 2.x or 
3.x browser versions. Even the 4.x versions of Netscape Navigator and Microsoft 
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Internet Explorer and the 5.x version of Microsoft Internet Explorer do not fully 
support all CSS features, and in some cases, support is inconsistent. If you choose 
cascading style sheets, be sure to test your site using all target browsers to make 
sure the site displays as you intended. 


To switch the text format setting: 


1. From the Tools menu, choose Options>Current Site. 


2. On the General tab, in the Text formatting section, select HTML or Cascading 
Style Sheets (CSS). 


3. Click OK. 


Understanding the Automatic Setting 


When you select Automatic in text formatting dialogs, the format attributes of a 
higher or parent style pass through to the lower or child style. 


The order of the cascading styles is: 


The SiteStyle is the parent of the Site, which is the parent of the Page. Thus, 
selecting Automatic for an attribute at the Page level lets the setting for that 
attribute pass from the Site to the Page. If the same attribute is set to Automatic in 
the Site as well, then the SiteStyle setting for that attribute ﬂows to the Site and 
then, unimpeded, to the Page. 


For example, if you set the font color to red at the SiteStyle level and set font color 
to Automatic on both the Site level and the Page level, text at the page level is 
automatically red when you type it. The red attribute ﬂows all the way from 
SiteStyle to the text. 


When you change a setting at a higher level, it changes the corresponding setting at 
the lower level if the setting at the lower level is Automatic. So, if the setting at the 


Browser 


SiteStyle 


Site 


Page 


Selected text 
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Formatting Text 


Page level is Automatic, and you change the font at the Site level, the font setting 
changes for the Page level, too. This feature provides you with a fast, powerful way 
to make formatting changes throughout your site by simply making the change 
once at the higher levels. 


Of course, there may be times when you don’t want the changes from the higher 
levels to be inherited by the lower levels. In that case you can edit the text style so 
Automatic is not selected for the particular format attribute. Editing a style at any 
level overrides the settings from the parent level. For example, if you select text and 
change its color to blue, that editing overrides a setting of red text from the 
SiteStyle level. 


You can mix choices among the formatting attributes so some have the Automatic 
setting and others don’t. For example, you could select the font to be inherited from 
a higher level (so you set it to Automatic), but manually select the color. 


See “Working with Text Styles” on page 160 for more information about the ﬂow of 
text styles and formats to text in your site. 


Formatting Selected Text 


With NetObjects Fusion you can reformat selected text to change the text font, size, 
color, and style, as well as the paragraph alignment and indent. You can format 
selected characters in text boxes or table cells. On a stacked page, you can format 
selected characters in formatted text ﬁelds, but in simple text ﬁelds, all characters 
have the same format. See Chapter 27, “Data Publishing.” 


1. Double-click the text box that contains the text. 


Hollow selection handles appear around the text box. 


2. To select: 


✦ Speciﬁc characters, drag over those characters. 


✦ A word, double-click the word. 


To select words quickly, you can set your options to automatically select the 
entire word. See “Setting Text Options” on page 23. 


✦ A paragraph, triple-click in the paragraph. 


✦ A block of text, click the ﬁrst character, then Shift+Click the last character. 


✦ Multiple paragraphs, drag through them. 
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3. Make sure the Format tab on the Text Properties palette is selected. 


4. Select a font from the drop-down list on the Text Properties palette. 


5. Select a font size from the drop-down list on the Text Properties palette. 


The relative settings (-2 to +4) set the font size relative to the site visitor’s 
default browser settings. To change the unit of measurement, you can type 
directly into the Size ﬁeld; for example, 12 pt. To change the unit throughout the 
site, you must edit the font size setting for the text format in Style view. 


Font style buttons 


6. Click a font style button to assign characteristics—bold, italic, underline, and 
strikethrough, superscript, or subscript—to the text. 


7. To assign a color other than the SiteStyle color to the text, click the color sample 
and select a color from the Color Picker. 


8. To remove all added formatting from the paragraph containing the selected text, 
click the Clear button. Inherited formatting remains. 


Alignment buttons 


9. To set left, center, right, or block alignment for the paragraph containing the 
selected text, click an alignment button. 


Indent buttons 


10. To indent the paragraph, click an indent button or press Tab. Using this 
indenting button nests the selected paragraph under unselected paragraphs. To 
nest the paragraph to a deeper level, continue to click the button or press Tab. 
Default indenting is set as part of the text’s format style. 


You can also assign list formats and text styles to selected text. See “Creating 
Bulleted and Numbered Lists” on page 168 and “Working with Text Styles” on 
page 160. 
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Formatting Paragraphs 


Using the options in the Paragraph Settings dialog, you can set formats for the text 
in a paragraph, the paragraph alignment, spacing, margins, indents, paragraph 
border, and paragraph background. 


When you format paragraphs, type all the text ﬁrst and then go back and apply the 
formatting. If you set formats as you enter the text, new paragraphs inherit the style 
of the paragraph before it. 


Note: Some options in the Paragraph Settings dialog have no effect if text formatting is set to 
HTML. These options are marked CSS only in the following sections. If you apply these 
options, you see them in Page view, but they disappear when you preview or publish 
the site. Be sure to test your site in all target browsers to ensure pages display as you 
intended. 


Formatting Text in a Paragraph 


1. Position the insertion point in the paragraph you want to format. You do not 
need to select text. 


2. On the Format tab of the Text Properties palette, click the Format button. 


3. In the Paragraph Settings dialog, click the Character tab. 
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4. Set the text format options. If you choose Automatic, the settings for the parent 
style pass through to the paragraph. See “Understanding the Automatic Setting” 
on page 149. 


✦ 
Font applies the text font; the list of fonts is derived from the font map in the 
\NetObjects System folder. 


If the speciﬁed font for the formatted text is installed on the site visitor’s 
system, HTML 3.x-compatible browsers display your text using this font. If 
the font is not installed, the browser checks a substitution table. If the 
speciﬁed substitution is not possible, the browser uses its default font. You 
can change the substitution table by editing the fontmap.txt ﬁle in the 
\NetObjects System folder. 


✦ 
Style applies a style to the text. You can select italic, bold, or bold italic. 


✦ 
Size sets the size of the text. You can choose the unit for specifying the font 
size from the drop-down list to the right of the size ﬁeld. 


You can choose any size up to 22192 pt., but the actual font and size site 
visitors see is based on their browser default setting and therefore is 
unpredictable. Also, some older browsers do not support all sizes. For those 
reasons, it is best to use the relative settings (such as -2 to +4). Then, when 
site visitors increase or decrease their browser font sizes, text size also 
increases or decreases. But if you use an absolute font size such as points, 
inches, or picas, the text on your pages stays the same size even if site 
visitors want to see it larger or smaller. 


✦ 
Color applies color to the text. The color box shows the current text color. To 
change the color, click the color box and select a color from the Color 
Picker. 


✦ 
Letter case sets the case (uppercase or lowercase) of the text. Use the 
Capitalize option to set initial caps, which capitalizes the ﬁrst letter of each 
word in the text. Choose None to remove a letter case format set at a higher 
level. 


✦ 
Small caps sets the text to appear in all small caps. If small caps is selected, it 
overrides the Letter case setting. Not all browsers support small caps. 
Choose None to remove a small caps format set at a higher level. 


✦ 
Position sets the text to be subscript or superscript. Choose Normal to 
remove a position format set at a higher level. 
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✦ 
Decoration sets the text to the selected decorations. You can select underline, 
overline (CSS only), and strikethrough. 


Setting Paragraph Alignment, Spacing, and Margins 


1. Position the insertion point in the paragraph you want to format. You do not 
need to select text. 


2. On the Format tab of the Text Properties palette, click the Format button. 


3. In the Paragraph Settings dialog, click the Paragraph tab. 


4. Set paragraph format options. If you choose Automatic, the settings for the 
parent style pass through to the paragraph. See “Understanding the Automatic 
Setting” on page 149. 


✦ 
Alignment sets the alignment to left, center, right, or block. Changing 
alignment here also changes the alignment setting on the Text Properties 
palette. If no button is selected, the text is aligned using the default 
alignment. 
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✦ 
Image wrap (CSS only) sets how text can wrap around an image. You can 
choose left, right, or on both sides of the image. To apply wrap settings to a 
particular image, use the Picture Properties palette. This feature is most 
useful when creating text styles. See “Creating a Text Style” on page 163. 


✦ 
Line height (CSS only) sets the amount of space between lines of text in the 
selected unit of measurement. 


✦ 
Letter spacing (CSS only) sets the amount of space between characters in the 
text in the selected unit of measurement. 


✦ 
Space above (CSS only) and Space below (CSS only) set the amount of space 
above and below paragraphs in the selected units of measurement. 


✦ 
First line indent sets the tab space indent for the ﬁrst line of text in the 
selected unit of measurement. This is the only way to indent a paragraph 
without using the space bar. 


✦ 
Left margin (CSS only) and Right margin (CSS only) set the margins on either 
side of the paragraph in the selected units of measurement. 


Setting Borders and Padding (CSS only) 


Borders are lines around a paragraph. Padding is the amount of space between the 
border lines and the text. If no border is set, padding can mimic margins around 
text. 


Note: Browsers can interpret your border and padding settings differently. Check the 
appearance of objects with borders and padding in different browsers to make sure the 
object appears as you intended. 


1. Position the insertion point in the paragraph you want to format. You do not 
need to select text. 


2. On the Format tab of the Text Properties palette, click the Format button. 


This text is inside a border. The 
padding is the space between the 
text and the borders. 


Border 
Padding 


NOF7.5UG~1.BOO Page 155 Thursday, January 21, 1904 11:14 PM 


156 


Formatting Text 


3. In the Paragraph Settings dialog, click the Borders tab. 


4. Select border settings. If you choose Automatic, the settings for the parent style 
pass through to the paragraph. See “Understanding the Automatic Setting” on 
page 149. 


✦ 
Automatic applies the default border setting. 


✦ 
None prevents the parent element’s border settings from being applied. 


✦ 
Border makes the other options available so you can apply individual border 
settings. Use: 


Style, Width, and Color to set the border’s line style, width, and color. Click 
the Color box to select a color from the Color Picker. 


Active borders to specify which borders appear around the paragraph. All 
four segments are selected by default, which adds a complete box around the 
paragraph. You can click any combination of segments. 


5. Select the amount of padding you want at each side of the paragraph. 
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Setting Background Options (CSS only) 


1. Position the insertion point in the paragraph you want to format. You do not 
need to select text. 


2. On the Format tab of the Text Properties palette, click the Format button. 


3. Click the Background tab. 


4. Set the background format options for the paragraph. If you choose Automatic, 
the settings for the parent style pass through to the paragraph. See 
“Understanding the Automatic Setting” on page 149. 


✦ 
Color sets the background color behind the text. Click the Color box to select 
a new color from the Color Picker. 


✦ 
Image sets the background to an image. Click Browse to select an image. 


✦ 
Attachment sets the background image to either remain ﬁxed or scroll as the 
text scrolls. This option applies only to Microsoft Internet Explorer 4.x. 


✦ 
Repeat sets how the image displays behind the text. Choose None to display 
a single image that does not repeat. Select Both to ﬁll the background 
entirely with the image. Select Horizontal or Vertical to display a row of 
images horizontally or vertically behind the text. 
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The horizontal and vertical settings do not work with many browsers. Do 
not use this feature unless you expect your site visitors to use Internet 
Explorer 5.0 or higher for Windows or Internet Explorer 4.5 or higher for 
the Mac OS. Netscape Navigator 4.7 and earlier do not use this feature 
properly. 


✦ 
Image Position sets the initial position of the background image. This feature 
is supported by Internet Explorer 3.0 and higher, but is not supported by 
Netscape Navigator 4.7 or earlier. To set the position to a speciﬁc value, 
select Value from the Horizontal and Vertical drop-down lists and enter a 
value for the position in the selected unit of measurement. 


To position the image correctly in browsers, the horizontal and vertical 
values interact. Note that when you change the setting for the horizontal or 
vertical position, the other setting changes accordingly. 


Formatting Text Objects within Paragraphs 


A text object is a portion of text that you can treat as a single unit. For example, a 
link is a text object. When you create a link and format it, you apply formatting 
features to the link as a single unit. If you apply a color, it applies to the entire link, 
not just a few letters. Paragraphs are also text objects because you can format them 
as a single unit without formatting the entire text box that contains the paragraph. 


Paragraphs can contain links and other text objects. When you format a paragraph 
containing another text object, some—but not all—of the new formatting is also 
applied to the contained object. Generally, the formatting is consistent with the type 
of object and the formatting available for it. For example, links do not have 
margins, so if you change the paragraph’s left and right margins, the link is not 
affected. But because the font of a link can be formatted, if you format the 
paragraph’s fonts the link’s fonts are also formatted. However, if the link’s font has 
already been deﬁned, it will not take on the paragraph’s font. 


If you change the format of the contained object, it does not affect the container 
object. So, if you change the color of the link text, the surrounding paragraph text is 
not affected. 
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The following table shows which text attributes affect a contained object and which 
do not. 


Text attribute 
Affects contained 
object 


Does not affect 
contained object 


Font 
x 


Style 
x 


Size 
x 


Color 
x 


Position 
x 


Case 
x 


Decoration 
x 


Small caps 
x 


Alignment 
x 


Image wrap 
x 


Line height 
x 


Letter spacing 
x 


Word spacing 
x 


Space above 
x (relative size 
corresponds to parent 
element’s width) 


Space below 
x (relative size 
corresponds to parent 
element’s width) 


First line indent 
x 


Left margin 
x 


Right margin 
x 


List style 
x 


List indent 
x 


All border and 
background attributes 


x 
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Working with Text Styles 


A text style is a predeﬁned set of formats for the characters, paragraphs, lists, 
borders, and backgrounds of text. Text styles provide a convenient way to specify, 
replicate, and update paragraph formatting for a text selection. 


You can create text styles or modify the text styles included with NetObjects 
Fusion. You can also create custom styles to use in conjunction with the styles on 
the Styles list. 


Applying a Text Style to a Paragraph 


1. In Page view, position the insertion point in the paragraph to which you want to 
apply a text style. 


2. In the Paragraph section of the Text Properties palette, select a text style from 
the Style drop-down list. The text changes to the new style. 


For example, if the original text is the Normal(P) style, and you select the 
Heading 1 (H1) style for the text, the entire paragraph changes to the H1 style. 


Applying a Style to a Text Span 


A span is a selection of text that you format as a unit. You can assign a custom style 
or other formats to the characters included in a span to differentiate that text from 
the rest of the paragraph. For example, if you want your company’s name to always 
appear in bold italic, you can create a custom style specifying those attributes. Then 
you select each instance of the company name as a span and apply the custom style. 


You can achieve the same result by selecting the text and manually formatting it 
from the Properties palette, but when you use a span you can apply a custom style 
quickly and then change it globally if necessary. 


To create a span: 


1. In Page view, select the text you want to format. 


Span tool 


2. Click the Span tool on the Standard toolbar. 
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The New Span dialog appears. 


3. Select a custom style from the drop-down list, or click the Format button and 
apply formatting to the selected text. 


4. Click OK. 


To remove a span, position the insertion point in the span, click the Span tab on the 
Text Properties palette, and click Remove Span. 


Using Custom Styles 


You can create custom styles to augment HTML tag styles. HTML tag styles, such 
as Heading 1 <H1> or Normal (P), are fundamental design characteristics of 
HTML. You can see examples of tag styles on the Text tab in Style view. Custom 
style elements are combined with HTML tag styles to produce a wide range of 
formats that you can apply to different pages or the entire site. See “Creating a Text 
Style” on page 163 to create a custom style. 


For example, suppose the original H1 head is bold and large. You want to create a 
series of custom H1 styles. On one set of pages you want the H1 heads to look like 
a shout, so you create a custom style to set the text to all capitals and italic and you 
call this custom style Shout. On the other pages you might want the H1 heads to 
look like a whisper, so you create a custom style that sets the text to be lowercase 
and condensed. Since you don’t want the text to inherit the bold and large size from 
the original H1 setting, you do not select Automatic. You name this custom style 
Shhh. 


When you apply the custom style to the text with the original H1 head, the only text 
attributes affected are those speciﬁed in the custom style. So, if the original H1 
head is bold and large, the result of applying the custom style Shout to selected text 
looks like this: 
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THE H1 HEADS WOULD LOOK LIKE THIS 


The text is bold and large (from the original <H1> head) and also all capitals and 
italic (from the custom style). The bold and large attributes pass through to the 
<H1> Shout style because the custom style did not affect those attributes. 


Applying the Shhh custom style, however, looks like this: 


The H1 heads would look like this 


In this case, the<H1> text in the Shhh style does not include the bold and large font 
size because you changed those attributes instead of using the Automatic settings. If 
the settings for bold and large remained Automatic, the Shhh style would include 
the bold and large font. 


When you apply custom styles, the name of the custom style is appended to the 
original HTML tag style with a period to differentiate the original HTML tag style 
from the new custom style. So, the two <H1> custom styles become <H1.Shout> 
and <H1.Shhh>. When NetObjects Fusion generates the HTML, the styles are 
represented as <H1 class="Shout"> and <H1 class="Shhh">. 


Setting a Style’s Scope 


When creating styles, you can limit the range of a style’s effects by setting the 
scope of the style. The scope of a style determines where the style’s effects are 
available and applied. The scope options are: 


✦ 
All available styles. Shows all styles regardless of scope. 


✦ 
SiteStyle. The style is available whenever the SiteStyle is applied. 


✦ 
Site. The style is available throughout the current site. 


✦ 
Page. The style is available only on a speciﬁc page of the current site. 


You set the scope of a style when you create it. 
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Creating a Text Style 


1. In Page view, from the Text menu, choose Edit Text Styles. 


The Text Styles dialog appears. 


The selected scope appears in the ﬁeld at the top of the dialog. 


The pane on the left lists the HTML tag styles and any custom styles you 
created for the selected scope. 


When the scope is set to All available styles, you can determine a style’s scope 
using the tree structure in the Text Styles dialog. Click the plus sign next to a 
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style to see its scope and the speciﬁc pages it applies to. In this example, the 
custom style named .Sales applies only to the Home page. 


Depending on the selected scope, the list of HTML tag styles can include link 
styles—Link:active, Link:hover, Link:linked, and Link:visited. For example, 
Link:hover is the style applied when a site visitor moves the mouse pointer over 
the link but does not click. Link:visited is the style applied after a visitor clicks 
the link. 


You can also create custom styles for the navigation bar, a text object, lists, and 
so on, for the styles listed in the pane on the left. 


2. From the Scope drop-down list, select the scope you want to work with. For 
example, if you want to see the styles that affect only the current page, select 
Styles in page. 


3. Click New or Duplicate. 
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The New Text Style dialog appears. 


The Duplicate Text Style dialog box is similar. Duplicating a style is a quick 
way to give it a different scope. For example, you can duplicate the H1 style to 
the H2, H3, and H4 headings and then edit them individually. 


4. In the Style type section, select: 


✦ 
Redeﬁne HTML tag and choose a tag to edit from the drop-down list. 


✦ 
Create custom style and type a name for the style in the ﬁeld. 


A period is added to the custom style’s name, such as .customstylename. In 
HTML the custom style is then referred to as class=customstylename. 


5. Select a style scope for the new style. 


✦ 
Page speciﬁc. If you select this option the new style is only available for the 
current page. If you are redeﬁning an existing tag, the original deﬁnition is 
still in force for the rest of the site. If you create a new style, it is not 
available on any other page of the site. 


✦ 
Site wide. If you select this option the new style is available throughout the 
current site. If you are redeﬁning an existing tag, all instances of this tag 
change throughout the site. For example, if you change the H1 font color to 
red and select Site wide, all text in the site with that style applied becomes 
red. 


6. Click OK. 


The Text Format dialog appears. You can now set the attributes for each feature 
of the style. See “Formatting Paragraphs” on page 152 and “Formatting a List” 
on page 169 for details. 
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Creating a Custom Text Attribute (CSS only) 


When you create a text style, the Text Style dialog includes a Custom tab where you 
can deﬁne custom text attributes. You should only create custom text attributes if 
you know HTML and cascading style sheet coding and understand the implications 
of cascading style sheet features. 


For example, if you enter the name cursor and the value wait, the pointer in 
Microsoft Internet Explorer 5.0 can appear as an hourglass. If you assign this new 
custom style to the Text Object, the pointer displays as an hourglass when it is over 
a text object on your site’s pages. Similarly, you can use custom attributes to take 
advantage of cascading style sheet attributes not supported directly, such as the 
pointer. 


To create a custom attribute: 


1. Follow the steps in “Creating a Text Style” on page 163 to create a new text 
style. 


2. In the Text Format dialog, click the Custom tab. 


3. Click the New button. 
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4. Enter the cascading style sheet name for the new attribute and then enter its 
value. 


To edit an existing custom attribute, select it in the list on the Custom tab. Its 
name and values appear in the Attribute properties boxes on the Custom tab. 
Make your changes in those boxes. 


5. Click OK. 


Custom attributes do not display in Page view but do appear in the browser if it 
supports cascading style sheet features. 


Modifying a Text Style 


1. In Page view, from the Text menu, choose Edit Text Styles. 


The Text Styles dialog appears. 


2. Select the style you want to modify, then click Edit. 


The Text Format dialog appears. 


3. To change the style, see “Formatting Text” on page 148. 


4. When you ﬁnish, click OK in the Text Format dialog. 


5. In the Text Styles dialog, click Close. 


NetObjects Fusion updates any paragraph to which you applied the style. 


Deleting a Text Style 


1. In Page view, from the Text menu, choose Edit Text Styles. 


The Text Styles dialog appears. 


2. Select the style you want to delete, then click Delete. 


You cannot delete a style deﬁned with multiple scopes. You must delete each 
one separately. To see if a style has multiple scopes, select All Available Styles 
from the Scope drop-down list and click the plus sign next to the style. 


3. Click OK to conﬁrm deletion and click Close. 
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Creating Bulleted and Numbered Lists 


To create a simple numbered or bulleted list: 


1. In Page view, select the text you want to format as a numbered or bulleted list. 


List type buttons 


2. Click a list type button on the Text Properties palette to select a numbered list or 
a bulleted list. 


When you click a list type button, NetObjects Fusion applies the default 
Ordered or Unordered List style. To change the style, see “Formatting a List” on 
page 169. 


3. To add an item to the list, press Enter at the end of a line. Press Shift+Enter to 
start a new line under the same bulleted item. 


To remove the list style from the selected list level, click the List tab on the 
Properties palette and click Remove List. 


To create a multi-level numbered or bulleted list: 


1. In Page view, select the text you want to include in the list. Make sure each item 
in the list is a separate paragraph. 


2. Click a list type button on the Text Properties palette. 


3. Select the paragraph or paragraphs you want to make subordinate and click the 
right indent button or press Tab. 


Each click of the indent button moves the selected paragraphs over one level in 
the list and adds the appropriate bullet or list character for that level. 
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Formatting a List 


1. In Page view, select any text in a numbered or bulleted list. 


2. Click the List tab on the Text Properties palette. 


3. Click the Format button. 


The List Settings dialog appears. 
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4. Set the List style. If you choose Automatic, the settings for the parent style pass 
through to the list. See “Understanding the Automatic Setting” on page 149. 


✦ 
Bullet. Select a bullet character or type of numbering from the drop-down 
list. 


✦ 
Bullet Image (CSS only). To use a graphic as the bullet character, click 
Browse and select the image you want. 


5. Set the Line indent (CSS only). 


✦ 
Automatic applies the indenting of the object that contains the list whenever 
the list text wraps to a second line. The amount of the indent is preset. See 
“Understanding the Automatic Setting” on page 149. 


✦ 
All lines indents all lines in each listed item to the same position. 


✦ 
First line only indents the ﬁrst line of each item in the list, but not the other 
lines. 


6. Click OK. 


Setting the List Start Value 


If you select a numbered list and want it to start with a value other than 1 or A, you 
can deﬁne a new start value. 


To set a new start value: 


1. In Page view, select any level in the numbered list. New start values only apply 
to numbered lists, not bulleted lists. 


2. Click the List tab on the Text Properties palette. 


3. In the Start Value box, enter a new start value, or click the up and down arrows 
to set the new value. 


All entries at that level of the numbered list now conform to the new start value. 
For example, if you change the start value to 3, the ﬁrst entry at that level is 
labeled 3, and the next entry is labeled 4. 
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Setting the List Bullet or Numbering Type 


You can choose a type of numbering or bullet character for each level of a list. 


To set a new bullet or numbering type: 


1. In Page view, select any level in the list. 


2. Click the List tab on the Text Properties palette. 


3. From the Bullet type drop-down list, select the type of bullet character or 
numbering you want for that level of the list. 


The text styles associated with lists are List, Ordered <OL>, List, Bulleted <UL>, 
and List Item <LI>. Selecting the type of bullet character or numbering 
automatically selects the proper text style from the ordered or bulleted list. 
Changing the <LI> style affects both types of lists. 


Note: Lists are formatted with bullets based on the List Item <LI> style; however, you can 
also format lists using other styles, such as Normal <P>. In that case, the list will not 
have a bullet character associated with it. Conversely, if you type a series of paragraphs 
and want to make them a list, you can apply the List Item <LI> style to the 
paragraphs. 


Inserting Symbols 


You can insert special symbols, such as an em dash or copyright symbol into text. 


1. In Page view, double-click the text box containing the text where you want to 
insert the symbol. 


2. Click the location in the text where you want to insert the symbol. 
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3. From the Text menu, select Insert Symbol. 


4. In the Insert Symbol dialog, select a symbol and click Insert. 


The symbol appears in the text. 


You cannot edit the list of symbols. 


Adding Text to a Shape or Picture 


When you add text to a shape or picture, the text becomes part of a new image ﬁle 
when you publish the page. Because the text is part of the image, the site visitor’s 
browser displays the correct font, even if the font is not installed in the visitor’s 
browser. 


If you add text to a picture ﬁle, when you publish the site, NetObjects Fusion 
generates a new picture ﬁle listed in Publish view as an auto-generated image. Your 
original ﬁle is unchanged in Assets view and not included among the site’s 
published assets. If you remove the text from the picture, the image remains listed 
as an auto-generated image. 


Windows 98, Windows NT, Windows 2000, Windows ME andWindows XP include 
a utility for smoothing fonts (also called anti-aliasing) that works with NetObjects 
Fusion. To turn on font smoothing in Windows NT, open the Control Panel, click 
the Display icon, and on the Plus! tab select Smooth edges of screen fonts. In 
Windows 98, Windows 2000, Windows ME, and Windows XP the option is on the 
Effects tab. You can also use other font management utilities, such as Adobe Type 
Manager, to smooth fonts. 


To add text to a shape or picture: 


NOF7.5UG~1.BOO Page 172 Thursday, January 21, 1904 11:14 PM 


Chapter 12 
Designing with Text 


173 


1. In Page view, select the shape or picture to which you want to add text. 


The corresponding properties palette appears. If you are working with a picture, 
click the Effects tab. 


2. In the Text in element section, select Enable and click Settings. 


The Text in Element Settings dialog appears. 


3. Type the text you want to add. Press Enter to start a new line. 


If you do not insert line breaks, the text does not wrap and may not be seen if it 
is wider than the element. 
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4. Select the settings for the text. 


✦ Click the Font Set button and select a font, style, and size. 


✦ Click the Color Set button and select a color in the Color Picker. 


✦ Select the Relative alignment, Horizontal position, and Vertical position for 
the text. 


The Relative alignment left-aligns, centers, or right-aligns two or more lines 
of text. It has no effect on single lines of text. 


The Horizontal position and Vertical position settings position the text 
within the object frame. 


To specify multiple lines of text in a SiteStyle banner or button, use the Custom 
Names dialog as described in “Using Custom Button and Banner Names and 
File Extensions” on page 47. 


5. In the Orientation section, move the slider to rotate the text. 


Select Right angles to limit the text rotation to 90-degree increments. 


6. Click Close to apply the text settings to the text. 


Creating and Editing Fields 


Fields contain variable text that is subject to change, such as the date and time the 
site was created or last modiﬁed, the site name and author, and so on. NetObjects 
Fusion includes several ﬁelds you can use or you can deﬁne your own. 


Inserting an Existing Field 


1. In Page view, double-click the text box and position the insertion point where 
you want to insert the ﬁeld. 


2. From the Text menu, choose Insert Field. 


On the left, Relative alignment is set to Left, 
Horizontal position and Vertical position are 
set to Center. On the right, Relative alignment 
is set to Center, Horizontal position to Left, and 
Vertical position to Center 
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The Insert Field dialog appears. 


3. Select the type of ﬁeld you want to insert from the Type drop-down list. 


If you select Date & Time, click Date & Time Format, select a format from the 
list in the Date & Time Format dialog, and click OK. 


Note: Once you publish the site, the date on the ﬁnal HTML page does not change 
automatically. It only changes if you modify the site in NetObjects Fusion and 
publish again. This is true of all variables. 


If you select Site & General and choose Author, you must type the author’s 
name on the META tags tab of the Current Site Options dialog. See “Entering 
META Tags” on page 53. 


4. Select the speciﬁc ﬁeld to insert from the Field list. 


5. Click OK in the Insert Field dialog. 


Creating a User-Deﬁned Variable 


A user-deﬁned variable is text or a phrase that is subject to change. For example, if 
you need to refer to quarterly sales ﬁgures, you can create a user-deﬁned variable 
and insert the number as a ﬁeld. As the ﬁgure changes each quarter, you can edit the 
ﬁeld as described in “Editing a Variable” on page 482, and NetObjects Fusion 
automatically updates the name wherever it appears in your site. You can only 
create plain text variables. You cannot reference internal NetObjects Fusion ﬁelds, 
such as page names, asset names, or object properties. 
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Checking Spelling 


1. In Page view, double-click the text box where you want to insert a user-deﬁned 
variable. 


2. From the Text menu, choose Insert Field. 


The Insert Field dialog appears. 


3. Select User-Deﬁned Variable from the Type drop-down list. 


4. Click New. 


The New Variable dialog appears. 


5. Type a name and value for the ﬁeld and click OK. 


The ﬁeld appears highlighted in the Field list of the Insert Field dialog. 


6. Click OK. 


Note: See “Changing General Settings” on page 52 to enable variable substitutions. 


Checking Spelling 


You can check the spelling of English language words in NetObjects Fusion. You 
can add words to a personal dictionary so they will no longer be ﬂagged as 
misspelled. Your personal dictionary is a simple text ﬁle, so you can use any text 
editor to add or delete words. You can check spelling throughout an entire site, on 
selected pages, or on a single page. 


If smart spell check is turned on, once NetObjects Fusion checks spelling in a text 
block, it does not check the same text again unless you modify the text or turn off 
smart spell check. See “Setting Text Options” on page 23. 
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1. Go to Site view or Page view. 


2. From the Tools menu, choose Spell Check. 


3. Select: 


✦ 
Entire Site to check the spelling of text on all pages in the site. 


✦ 
Selected Pages to check the spelling of text on the pages selected in Site view. 


✦ 
Current Page to check the spelling of text only on the page displayed in Page 
view. 


If NetObjects Fusion does not recognize a word, it displays it in the Not in 
Dictionary field of the Spelling dialog. 


Email addresses and URLs are not checked. 


4. Click: 


✦ 
Options to choose a language, and to choose a location for your personal 
dictionary. 


✦ 
Ignore to skip this instance of the word. 


✦ 
Ignore All to skip all instances on this page. 


✦ 
Change to replace this instance with the word in the Change to ﬁeld. 


✦ 
Change All to replace all instances on this page with the word in the Change 
to ﬁeld. 


✦ 
Add to put the word in your personal dictionary. 


✦ 
Suggest to see alternate spellings for the word. Double-click a suggestion to 
use it. 


✦ 
Cancel to cancel the spelling check. 
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Finding Text 


1. Go to Site view or Page view. 


2. From the Edit menu, choose Find. 


The Find and Replace dialog appears. 


3. In the Find in ﬁeld, select a scope for the search. 


The options vary depending on the current view and the selected object. 
Select: 


✦ 
Entire site to search all text in the site 


✦ 
Selected pages to search text on the pages selected in Site view. 


✦ 
Current page to search text on the page currently displayed in Page view. 


✦ 
Current text box to search text in the text box currently selected in Page view. 


✦ 
Selected text to search only the text currently selected in Page view. 


4. In the Find what ﬁeld, type the word, letters, or phrase you want to ﬁnd. 


5. Select options to narrow the search. 


6. Click Find Next. 


NetObjects Fusion searches for the text. 


Replacing Text 


1. Go to Site view or Page view. 


2. From the Edit menu, choose Replace. 


The Find and Replace dialog appears. 


3. In the Find in ﬁeld, select a scope for the search. 


The options vary depending on the current view and the selected object. 
Select: 


✦ 
Entire site to search all text in the site 


✦ 
Selected pages to search text on the pages selected in Site view. 


✦ 
Current page to search text on the page currently displayed in Page view. 
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✦ 
Current text box to search text in the text box currently selected in Page view. 


✦ 
Selected text to search only the text currently selected in Page view. 


4. In the Find what ﬁeld, type the word, letters, or phrase you want to replace. 


5. In the Replace with ﬁeld, type the replacement text. 


6. Select options to narrow the search. 


7. Click Find Next. 


8. Click Replace to replace the found text, or click Replace All to replace all 
instances of the text with the replacement text. 


Counting Words, Lines, Paragraphs, and Characters 


➲ To get a count for the current page, in Page view, choose Word Count from the 
Tools menu. 


If the text box includes embedded objects, the line count is incremented for 
each embedded object. 
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Counting Words, Lines, Paragraphs, and Characters 
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Placing Pictures 
13 


You can enhance your pages by placing pictures in the Layout area and 
MasterBorder. This chapter tells how to add pictures and modify their size and 
appearance. 


This chapter describes: 


✦ Choosing an image format 


✦ Adding a picture 


✦ Resizing a picture 


✦ Auto-generated images 


✦ Cropping a picture 


✦ Tiling a picture 


✦ Rotating a picture 


✦ Creating a border around a picture 


✦ Creating a transparent GIF 


✦ Adding text to a picture 
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Choosing an Image Format 


Choosing an Image Format 


To display a picture, most browsers require the picture to be stored in one of the 
following Web-standard formats: 


✦ Joint Photographic Experts Group (.jpg) supports 24-bit true color. 


✦ Graphics Interchange Format (.gif) supports 8-bit, 256-color images. 
NetObjects Fusion also supports GIF 89, a format for transparency, interlacing, 
and animation, as well as animated .gifs. An animated .gif ﬁle contains multiple 
images that a browser plays in sequence, adding movement to your pages 
without browser plugins. 


✦ Portable Network Graphics (.png) supports any color-depth image. To view .png 
images with Netscape Navigator 4.0, the PNG Live 2.0 plugin is required; 
Microsoft Internet Explorer 4.0 does not require a plugin. Earlier versions of 
both browsers require PNGLive 1.0 to view the image. You can ﬁnd this plugin 
at http://home.netscape.com/plugins/image_viewers.html. 


If you try to place a picture that is in .bmp, .pcx, .pct, or .psd format, NetObjects 
Fusion offers to convert it to .gif or .jpg format. NetObjects Fusion copies the ﬁle, 
converts the copy, and stores the copy in the site’s \Assets folder. 


If you are using Windows NT, you can use the Picture tool to place Flashpix (.fpx) 
images. You can also use the Media Plug-in tool, as described in “Inserting Other 
Types of Files” on page 340, to place an .fpx ﬁle in Windows 98, or Windows NT. 


Adding a Picture 


Picture tool 


1. In Page view, choose the Picture tool from the Standard toolbar, and click where 
you want to position the upper left corner of the picture. 


The Picture File Open dialog appears. 


2. Select the image ﬁle you want from your hard disk or LAN, or select an image 
already in use in the site from the Image Assets tab. See Chapter 29, “Managing 
Assets.” 


You cannot set the palette, color depth, or compression scheme of an image in 
NetObjects Fusion. If these options are important to your design, edit the ﬁle in 
an image editing application and then place it in your site. 


From the Files of type drop-down list, select: 
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✦ 
Web Images, to see a list of all image ﬁles that can be viewed in a Web 
browser, including .gif, .jpg, and .png. 


✦ A speciﬁc ﬁle type, to see only ﬁles of that type. You can select GIF, JPEG, 
PNG, BMP, PCX, PICT, or FPX. 


✦ 
All Images, to view all ﬁles that are image ﬁles. 


✦ 
All Files, to see all ﬁles in the selected folder. 


3. Make sure Show thumbnail image is selected if you want to preview your image 
in the dialog. 


4. Click Open to place the image on the page. 


If you select a non-standard Web format, the Unsupported File Format dialog 
appears. 


✦ If you convert to .gif, NetObjects Fusion reduces the image to 256 colors. 


✦ If you convert to .jpg, NetObjects Fusion retains the color information from 
the original ﬁle. 


Show thumbnail 
image check box 


Thumbnail image 
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Resizing a Picture 


✦ If you choose not to convert, NetObjects Fusion positions the image in 
HTML using the <EMBED> tag. Only browsers that have the appropriate 
plugin installed can view the image. 


5. Choose the appropriate conversion format and click OK. NetObjects Fusion 
copies the ﬁle, converts the copy, and stores the copy in the site’s \Assets folder. 
Both the original ﬁle and the copy are listed in Assets view. Only the converted 
copy is required for your site, so you can delete the original ﬁle. 


If the ﬁle is in a supported format, the ﬁle is not copied and it remains in its 
original location. 


The picture and Picture Properties palette appear. 


6. Type a description of the picture in the AltTag ﬁeld. 


See “Adding and Modifying Alt Tags” on page 84. 


Resizing a Picture 


When you resize a picture and publish the site, NetObjects Fusion changes the 
HTML <HEIGHT> and <WIDTH> attributes of the image, so the ﬁle is displayed 
in the new size. Your original ﬁle is unchanged, included among the site assets, and 
used on the page. To change an image’s ﬁle size, you must use an image editing 
application. 


1. In Page view, select the picture you want to resize. 


The Picture Properties palette appears. 
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2. Set the picture’s Display property to Stretch. 


3. Drag any handle until the picture is the size you want. To size the picture 
proportionally, hold down the Ctrl key as you drag a corner handle. 


To return the selected picture to its original size, either: 


✦ Set the picture’s Display property to Normal. 


✦ From the Object or shortcut menu, choose Restore Original Size. 


Auto-generated Images 


When you add an image to a SiteStyle, crop an image, tile an image, rotate an 
image, create a transparent GIF, or add text to a shape or picture, NetObjects Fusion 
generates a new ﬁle, referred to as an auto-generated image. 


In most cases, the names of these auto-generated images include the original ﬁle 
name preceded by a_. For example, if you crop an image named camping.gif, 
NetObjects Fusion generates a cropped version of the image named a_camping.gif. 


These auto-generated images are listed in Publish view. If you retain the default by 
Asset Type ﬁle arrangement when you publish, NetObjects Fusion saves these 
images in the assets\images\autogen folder. 


The original image is unchanged and is listed in Assets view. 


Cropping a Picture 


You can crop a picture to make only part of it visible. When you publish the site, 
NetObjects Fusion generates a new ﬁle listed in Publish view with a new name as 
an auto-generated image. Your original ﬁle is unchanged and included among the 
site assets. The auto-generated file is included in the published site on the server. 


1. In Page view, select the picture you want to crop. 


2. Set the picture’s Display property to Normal. 


3. Drag any selection handle to reduce the size of the box enclosing the picture. 
NetObjects Fusion crops the bottom and right sides of the picture. 
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Tiling a Picture 


Tiling a Picture 


You can create multiple instances of a picture by tiling it. When you publish the 
site, NetObjects Fusion generates a new ﬁle listed in Publish view with a new name 
as an auto-generated image. Your original ﬁle is unchanged and included among the 
site assets. The new ﬁle is included in the published site on the server. 


1. In Page view, select the picture you want to tile. 


The Picture Properties palette appears. 


2. Set the picture’s Display property to Tile. 


3. Drag a selection handle to enlarge the box and display more or fewer tiled 
images. 


NetObjects Fusion displays multiple images of the picture in the box. Each 
image is the size of the picture in the source ﬁle. 


Rotating a Picture 


You can rotate pictures in 90-degree increments. When you rotate a picture and 
publish the site, NetObjects Fusion generates a new ﬁle listed in Publish view with 
a new name as an auto-generated image. Your original ﬁle is unchanged and 
included among the site assets. The new ﬁle is included in the published site on the 
server. 


1. In Page view, select the picture you want to rotate. 


The Picture Properties palette appears. 


2. Click the Effects tab. 
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3. In the Rotate ﬁeld, select the desired rotation. 


Creating a Border Around a Picture 


You can use the Picture properties to add a border around a picture. 


1. In Page view, select the picture for which you want to create a border. 


The Picture Properties palette appears. 


2. Click the Effects tab. 


3. In the Border ﬁeld, specify the thickness of the border. 


The border color is controlled by the site visitor’s browser and the page text color 
settings. Check the border appearance in the appropriate browsers before 
publishing your site. 


Picture rotated 90 degrees 
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Creating a Transparent GIF 


Creating a Transparent GIF 


When you place a .gif image on a page, you can make every pixel of one color 
transparent. Although only part of the image is transparent, it is called a transparent 
.gif. You can use transparent .gifs to blend an image background with the page 
background, or to silhouette an image against the page background. 


An image with a solid background works best because only pixels of exactly the 
same color can be transparent. If the image background is dithered, it contains 
several colors. 


Note: Transparency only works with .gifs. You cannot set a transparency for a .jpg or other 
image ﬁle format. 


When you use transparency, NetObjects Fusion generates an auto-generated image 
with a new name. Your original ﬁle is unchanged and included among the site 
assets. The new ﬁle is included in the published site on the server. 


To create a transparent .gif: 


1. In Page view, select the picture for which you want to create a transparent .gif. 


The Picture Properties palette appears. 


2. Click the Effects tab. 


3. Click the Transparency dropper, then click the color in the picture that you want 
to make transparent. 


The Use color check box is selected, and NetObjects Fusion displays the color 
you selected in the box next to it. 


4. To make a transparent color opaque, clear the Use color check box. 


Ordinary .gif 


Page background shows through 
transparent .gif 
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Adding Text to a Picture 


You can add text to a picture and format its font, size, and alignment. The text you 
add becomes part of a new image ﬁle when you publish the page containing the 
picture. When you add text to a picture and publish the site, NetObjects Fusion 
generates a new ﬁle listed in Publish view as an auto-generated image. Your original 
ﬁle is unchanged and included among the site assets. The new ﬁle is included in the 
published site on the server. See “Adding Text to a Shape or Picture” on page 172. 
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Adding Text to a Picture 


NOF7.5UG~1.BOO Page 190 Thursday, January 21, 1904 11:14 PM 


C H A P T E R 14 


191 


Creating Photo Galleries 
14 


Using the Photo Gallery tool, you can quickly create sophisticated Web photo 
albums. You assemble your digital images, add captions and descriptions, and 
choose from an assortment of high-quality thumbnail and photo frames. Your 
images look great on the Web and download quickly. 


This chapter describes: 


✦ Adding galleries 


✦ Working with photos 


✦ Adding, editing, and formatting titles and captions 


✦ Controlling download time 


✦ Formatting the thumbnail page 


✦ Formatting photo pages 


✦ Saving Proﬁles 
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About Photo Galleries 


About Photo Galleries 


Each photo gallery you add to your site includes two types of pages—a thumbnail 
page and photo pages. 


✦ The thumbnail page shows a small image of each photo in the gallery displayed 
in a template that you select. Site visitors click a thumbnail image to see the 
photo page. 
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✦ Each photo page displays a large version of the image. You can add and format a 
title and description for the photo. 


When you add a photo gallery object to the thumbnail page, NetObjects Fusion 
automatically adds the photo page for you. On the Site Navigation palette, the 
photo page is as a single icon that contains multiple pages. 


Thumbnail page 
contains the photo 
gallery object 


Photo page 
contains a stack of 
pages, one for 
each photo 
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Adding a Photo Gallery 


Adding a Photo Gallery 


You can create a new photo gallery or add an existing photo gallery to your site. 
You can duplicate an existing gallery or add galleries that you removed from the 
site. See “Removing a Photo Gallery” on page 219. 


You add the photo gallery object to the page where you want to display thumbnail 
images of the photos in the gallery. You can add a new page or use an existing page. 


Creating a New Photo Gallery 


1. In Page view, display the page where you want to place the photo gallery object. 


This is the page where the thumbnail images appear. 


Photo Gallery tool 


2. Choose the Photo Gallery tool from the Advanced toolbar and click in the upper 
left corner of the Layout area. 


Start in the upper left corner to allow as much space as possible for the 
thumbnail images. 


The Add Photo Gallery dialog appears. 


Current photo galleries and photo galleries that were added to the site and then 
removed are listed in the Insert an existing Photo Gallery section at the bottom 
of the dialog. If no other galleries were created, you do not see this list. 


3. Type a name for the new photo gallery. 


NetObjects Fusion uses the name you enter as the name of the photo page. This 
name appears in the banner at the top of each photo page. You can rename the 


Current photo galleries and photo galleries 
that were added to the site and then removed 
are listed in the Insert an existing Photo 
Gallery section as shown at the right. If no 
other galleries were created, you see the 
dialog above. 
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page in Site view just as you rename any other page, or you can display the 
photo title in the banner or edit the text on the Banner Properties palette. See 
“Renaming Pages” on page 46, “Selecting a Photo Page Layout” on page 216, 
or “Changing the Banner Text” on page 279. 


You cannot use the name of an existing photo gallery. 


4. Choose a Proﬁle. 
NetObjects Fusion allows you to reuse settings each time you add a new photo 
gallery. You may choose a proﬁle containing all information associated with an 
existing photo gallery, or choose Default to create a new proﬁle. See “Saving a 
Photo Gallery Proﬁle on page 212.” 


Current proﬁles and proﬁles of photo galleries that were added to the site and 
then removed are included in the Create a new Photo Gallery section at the top 
of the dialog. If no other proﬁles were created, you can only choose Default. 


5. Click OK. 


Inserting an Existing Photo Gallery 


1. Display the designated thumbnail page in Page view. 


Photo Gallery tool 


2. Choose the Photo Gallery tool from the Advanced toolbar and click in the upper 
left corner of the Layout area. 


Start in the upper left corner to allow as much space as possible for the 
thumbnail images. 


The Add Photo Gallery dialog appears. 


Available photo galleries are listed in the Insert an existing Photo Gallery 
section at the bottom of the dialog. 


3. Select Insert an existing Photo Gallery. 


4. Select the gallery you want to insert and click Done. 


Working with Photos 


NetObjects Fusion creates two copies of each image ﬁle—one for the thumbnail 
page and one for the photo page. These copies are published when you publish the 
site; the ﬁles are generally much smaller than the original image ﬁle. NetObjects 
Fusion does not change your original image ﬁle. 
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Working with Photos 


The photo gallery is designed to work best with digital photos. However, you can 
use scanned photos as well. When scanning, make sure you make the scan larger 
than necessary. 


Adding Photos 


You add photos on the Images tab of the Photo Gallery Properties Editor. If you 
have just added a photo gallery, the Photo Gallery Editor will appear and you may 
skip step 1. 


1. Open the Photo Gallery Properties Editor. You can: 


✦ Add a photo gallery by following the steps in “Adding a Photo Gallery” on 
page 194. 


✦ Double-click a photo on a thumbnail page or a photo page. 


The Photo Gallery Properties Editor appears, displaying the Images tab. 


2. Click Add. 


The Open dialog appears. 
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3. Navigate to the folder containing the photos you want to add to the gallery. 


4. Select the photos for the gallery. You can: 


✦ Click a single photo to select it. 


✦ Press Shift+Click or Ctrl+Click to select multiple photos. 


✦ Press Ctrl+A to select all photos in the folder. 


✦ Select “Use ﬁle name for title” 


If you choose the ﬁle name for the title, it will exclude the extension and 
automatically populate the title ﬁeld in the properties editor. 


5. Click Add. 


The photos you select are listed in the File Name column on the Images tab. 
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Working with Photos 


Arranging Photos 


Photos are listed in the File Name column on the Images tab of the Photo Gallery 
Properties Editor in the order in which you add them to the gallery. This is also the 
order in which they appear on the photo pages. If you select several ﬁles from a 
folder, they appear in alphabetical order. This is probably not the order in which 
you want to display the photos, so you must rearrange them. 


You can rearrange the photos on the Images tab of the Photo Gallery Properties 
Editor, or directly on the thumbnail page. If you do this on the thumbnail page, you 
can see the images as you arrange them. This is useful if your photos do not have 
meaningful ﬁle names, for example 01.jpg, 02.jpg. 


Dragging Photos on the Thumbnail Page 


1. Display the thumbnail page in Page view. 


2. Click the image you want to move and drag it to a new position. 


A red indicator shows where the image will be placed. 


If your gallery has many photos, they will be easier to organize if you can see all the 
images in Page view without scrolling. To see as many images as possible, reduce 
the size of the thumbnail, select a template that has a thin frame (for example, 
Simple border), and increase the number of columns. When the images are 
organized as you want them, select the template you want to use, change the 
number of columns, and then resize the thumbnails. See “Resizing Photos” on 
page 199 and “Formatting the Thumbnail Page” on page 213. 


Click the photo in the upper left and 
drag it to the right 
When you release the mouse button, 
the photo moves into the new position 
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Moving Photos on the Images Tab 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Images tab. 


4. In the File Name column: 


✦ Select a photo and drag it into a new position in the list. 


An indicator displays as you move the photo. 


✦ Select a photo and click Move Up or Move Down to shift it into the proper 
position. 


Resizing Photos 


You can increase or decrease the size of the thumbnail images or the size of an 
individual photo page image or all the photo page images. NetObjects Fusion 
retains the image’s proportions when you resize. 


Note: Some templates do not allow the photos to be resized. If you want to resize photos, you 
must select another template. 


To resize photos: 


1. In Page view, display the thumbnail page or the photo page of the gallery you 
want to work with. 


2. Click an image. 
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Working with Photos 


The properties palette appears. 


3. Resize the image. 


You can change the image size by dragging the slider on the properties palette, 
by entering the width directly in the properties palette, or by dragging the 
image. 


✦ To change the image size by dragging, select the image and drag the small 
white box until the image is the size you want. 


When you release the mouse button, the image is resized. If you are on the 
thumbnail page, all images are resized. 


✦ To change the image size by dragging the slider on the properties palette: 


Drag the slider on the properties palette to the right to increase the image 
size, or to the left to decrease the size. A dotted line rectangle increases or 


Drag this box to change 
the size of the image 
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decreases proportionally as you drag and the size of the image is displayed 
in a ScreenTip. 


When the image is the size you want, release the mouse button. 


✦ To change the image size by entering the width directly in the Thumbnail 
Properties palette, type a number in the Width ﬁeld. 


4. Apply the change. 


✦ If you are on the thumbnail page, click Apply to all to resize all thumbnail 
images. 


✦ If you are on a photo page, click Apply to resize only the current photo or 
Apply to all to resize all photos in the gallery. 


Removing Photos 


You can remove photos from the gallery on the thumbnail page, on the photo page, 
or on the Images tab of the Photo Gallery Properties Editor. 


Removing a Thumbnail 


1. In Page view, display the thumbnail page of the gallery. 


2. Select the image you want to remove and press Delete. 


Removing a Photo Page 


1. In Page view, display the photo page containing the photo you want to remove 
from the gallery. 


NOF7.5UG~1.BOO Page 201 Thursday, January 21, 1904 11:14 PM 


202 


Opening the Photo Gallery Properties Editor 


Delete 


2. Click the Delete button on the control bar. 


3. Click Yes to conﬁrm deletion. 


Removing Photos from the Images Tab 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Images tab. 


4. In the File Name column, select a photo and click Delete. 


Click Delet.e All to remove all photos from the gallery. 


Opening the Photo Gallery Properties Editor 


The tab you see when you open the Photo Gallery Properties Editor depends on 
how you open it. 


✦ If you double-click a photo on a thumbnail page or photo page, the editor opens 
showing the Images tab with the photo you clicked selected. 


✦ If you double-click a thumbnail frame, the editor opens showing the Thumbnail 
Page tab. 


✦ If you double-click a photo frame, the editor opens showing the Photo Page tab. 


✦ If you click the Conﬁgure button on the Photo Gallery Properties palette on the 
thumbnail page, the editor opens to the Thumbnail Page tab. 


✦ If you click the Conﬁgure button on the Photo Gallery Properties palette on a 
photo page, the editor opens to the Photo Page tab. 


Adding and Editing Photo Titles and Captions 


A title and descriptive caption help site visitors enjoy your photos. You can add this 
text on the Images tab of the Photo Gallery Properties Editor or directly on the page 
that features the photo. If the selected thumbnail template shows the photo title, you 
can add it on the thumbnail page. 
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Adding and Editing Photo Titles and Captions on the Images Tab 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Images tab. 


4. Select a photo in the File Name column. 


5. Click in the Title text ﬁeld and type the title for the photo. 


Try to make your title descriptive, but brief. 


Text you type here appears on the photo page and at the bottom of the thumbnail 
image if the selected template includes the photo title. 


6. Click in the Caption ﬁeld and type text that describes the photo. If you do not 
want to add a caption, skip this step. 


Text you type here appears on the photo page. 


7. Click another photo in the File Name list to continue adding titles and captions, 
or click Done to close the editor. 


To edit existing text, click in the text ﬁeld and make changes. Be aware that if you 
formatted some or all of the text on the photo page, the formatting will be lost if 
you modify the text on the Images tab of the Photo Gallery Properties Editor. 


For information about formatting the title and caption text, see “Formatting Photo 
Titles and Captions” on page 205. 
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Adding and Editing Photo Titles and Captions 


Adding and Editing Photo Titles on the Thumbnail Page 


If the selected thumbnail template accommodates a photo title, you can enter it 
directly on the thumbnail page. 


1. In Page view, display the thumbnail page of the gallery you want to work with. 


2. Click in the blue border at the bottom of the thumbnail image and type the title 
text. 


To edit existing text, click in the text ﬁeld and make changes. 


For information about formatting the title text, see “Formatting Photo Titles and 
Captions” on page 205. 


Type the title text here 
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Adding and Editing Photo Titles and Captions on the Photo Page 


1. In Page view, display the photo page you want to work with. 


2. Click in the blue bordered title text ﬁeld and type the title text. 


3. Click in the blue bordered caption text ﬁeld and type the caption text. 


To edit existing text, click in the text ﬁeld and make changes. 


For information about formatting the title and caption text, see “Formatting Photo 
Titles and Captions.” 


Formatting Photo Titles and Captions 


Formatting Photo Titles 


You can format all the titles at once from the Photo Page tab of the Photo Gallery 
Properties Editor, or format individual titles on the individual photo pages. 


Note: If you specify formats and they do not appear in the text, it could be caused by the text 
style deﬁnitions, usually the deﬁnition of the Body and Normal(P) tags in the SiteStyle. 
For example, if the Body tag deﬁnes the font size, that deﬁnition overrides any font size 
you specify in the Object Format dialog. You can get around this by choosing a SiteStyle 
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Formatting Photo Titles and Captions 


that does not deﬁne the property you want to set, or by formatting the individual 
photo titles. See “Formatting an Individual Photo Title” on page 207. Any individual 
text you format overrides the SiteStyle deﬁnitions. 


Formatting All Photo Titles 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Photo Page tab. 


4. Click Format Title. 


The Object Format dialog appears. 


5. Set the text format. See “Formatting Text” on page 148. 
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Formatting an Individual Photo Title 


You can apply formatting to all or part of the title text. For example, you can make 
a single word bold for emphasis. Formatting you apply here is also reﬂected in the 
title text on the thumbnail page. 


1. In Page view, display a photo page. 


Next 


2. Click the Next button on the control bar until the photo you want to work on 
appears. 


3. Select all or part of the title text. 


4. Use the options on the Format tab of the Title Properties palette to format the 
text. See “Formatting Text” on page 148. 


Formatting Photo Captions 


You can format all the captions at once from the Photo Page tab of the Photo 
Gallery Properties Editor, or format individual captions on the individual photo 
pages. 


Note: If you specify formats and they do not appear in the text, it could be caused by the text 
style deﬁnitions, usually the deﬁnition of the Body and Normal(P) tags in the SiteStyle. 
For example, if the Body tag deﬁnes the font size, that deﬁnition overrides any font size 
you specify in the Object Format dialog. You can get around this by choosing a SiteStyle 
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Formatting Photo Titles and Captions 


that does not deﬁne the property you want to set, or by formatting the individual 
photo titles. See “Formatting an Individual Photo Caption” on page 208. Any individual 
text you format overrides the SiteStyle deﬁnitions. 


Formatting All Photo Captions 


1. In Page view, display a photo page of the gallery you want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Photo Page tab. 


4. Click Format Caption. 


The Object format dialog appears. 


5. Set the text format. See “Formatting Text” on page 148. 


Formatting an Individual Photo Caption 


You can apply formatting to all or part of the caption text. For example, you can 
make a single word bold for emphasis. 


1. In Page view, display a photo page. 


Next 


2. Click the Next button on the control bar until the photo you want to work on 
appears. 


3. Select all or part of the caption text. 


4. Use the options on the Format tab of the Captions Properties palette to format 
the text. See “Formatting Text” on page 148. 


Formatting Photo Thumbnail Titles 


If the selected thumbnail template includes a photo title, you can format the title of 
all the photos at once from the Thumbnail Page tab of the Photo Gallery Properties 
Editor, or you can format individual titles from the thumbnail page. 


Note: If you specify formats and they do not appear in the text, it could be caused by the text 
style deﬁnitions, usually the deﬁnition of the Body and Normal(P) tags in the SiteStyle. 
For example, if the Body tag deﬁnes the font size, that deﬁnition overrides any font size 
you specify in the Object Format dialog. You can get around this by choosing a SiteStyle 
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that does not deﬁne the property you want to set, or by formatting the individual 
photo titles. See “Formatting an Individual Thumbnail Title” on page 209. Any 
individual text you format overrides the SiteStyle deﬁnitions. 


Formatting All Thumbnail Titles 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Thumbnail Page tab. 


4. Click Format Title. 


5. Set the text format. See “Formatting Text” on page 148. 


Formatting an Individual Thumbnail Title 


You can apply formatting to all or part of the title text. For example, you can make 
a single word bold for emphasis. Formatting you apply here is also reﬂected in the 
title text on the photo page. 


1. In Page view, display the thumbnail page you want to work with. 


2. Click in a title text ﬁeld. 


3. Use the options on the Format tab of the Title Properties palette to format the 
text. See “Formatting Text” on page 148. 


Controlling Download Time 


When you conﬁgure a photo gallery, be considerate of site visitors by minimizing 
the time it takes for the images to download. Image quality and size both affect 
download time. You can use the output settings in the Photo Gallery Properties 
Editor and the ﬁle size information on the properties palette to keep track of and 
adjust download time while maintaining image quality. 


To control the image format: 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Images tab. 
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Controlling Download Time 


The output settings for thumbnail images and the photo images are separate. 


4. Click the Thumbnail Image tab or Photo Image tab at the bottom of the Images 
tab. 


On these tabs you set the quality of the thumbnail and photo images for the 
selected ﬁle. As you make changes, NetObjects Fusion displays the 
approximate download time for the ﬁle. 


You may choose to save and apply previously deﬁned settings. See “Saving 
Output Settings” on page 207. 


5. Select the File type. 


Most photos will be JPEG format. 


6. Set the Quality and Percent. 


These ﬁelds both affect image quality. 100% is the highest quality, 0% the 
lowest quality. 


a. Set the Quality ﬁeld ﬁrst. Each setting corresponds to a range of percents. 
Low corresponds to 0-39%, Medium to 40-75%, High to 76-99%, and 
Maximum to 100%. 


b. Use the Percent ﬁeld to ﬁne-tune the quality setting. 


As you adjust the settings, the image in the Preview ﬁeld changes. If the 
Preview image is scaled down, you can close the editor and check image quality 
in Page Design view. 


7. Select a download speed. 


The most common download time is 56.6. 
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8. To apply these settings to all the photos in the gallery, click Apply to All. 


This affects all thumbnail images or all photo images, depending on the selected 
tab. 


9. Set image rotation. This setting affects only the selected image. 


To display images in their original form 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Galleries Property Editor. 


3. Display the Images tab. 


4. Click the Photo Images tab at the bottom of the Images tab. 


This option is not available for thumbnail images. 


5. Choose Use Original Image from the Output Settings menu. 


Note: You may not edit output settings if Original Image Setting is chosen. If you select 
Original Image on the photos tab, frames that have ﬁxed width cannot be used. You 
may change the Photo Frame to one that does not have a ﬁxed width (ex. Simple 
Border) or choose to revert to the previous image setting. 


To control the image sizes: 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Select a thumbnail or photo image. 


Notice the image size on the properties palette. 


If you selected a thumbnail image, you can choose to see the size of the current 
image or of all thumbnail images. 


3. Resize the image. See “Resizing Photos” on page 199. 


As you resize, the Properties palette shows the effect on the ﬁle size. 


Saving Output Settings 


To save your output settings: 
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Adding Alt Tags 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Images tab. 


The output settings for the thumbnail images and the photo images are seperate. 


4. Click the thumbnail Image tab or Photo Image tab at the bottom of the Images 
tab. 


5. Click on the Output Settings menu and choose Save Setting. 


Note that a change must be made to the default settings in order to create a new 
setting. 


6. Type a name for the new output setting. 


7. Edit File Type, Quality and Percent, if necessary. 


8. Click OK. 


Adding Alt Tags 


Adding Alt tags is an easy way to give text desciptions to your photos and help 
visitors that do not have images loaded or are browsing using text-based browsers. 
Also, using Alt tags is a great way to make sure search engines recognize all 
content on your site. You can add Alt tags on both the Thumbnail Image and Photo 
Image tabs. 


To add Alt tags; 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Galley Properties Editor. 


3. Display the Images tab. 


4. Click the Thumbnail Image tab or Photo Image tab at the bottom of the Images 
tab. 


5. In the Alt tag ﬁeld, type in the text you would like your site visitors to see. 
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Formatting the Thumbnail Page 


On the thumbnail page, you determine how site visitors enter the photo gallery. You 
can set up: 


✦ a text link that visitors click to see the ﬁrst photo 


✦ thumbnail size renderings of each photo in the gallery so site visitors have 
access to individual photos 


Creating a Text Link to a Photo Gallery 


You can set up a single text link that site visitors click to enter the photo gallery. 
This takes visitors to the ﬁrst photo in the gallery. They then use the gallery 
navigation buttons to move between pages in the gallery. 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Thumbnail Page tab. 


4. In the Format section of the tab, select Text link. 


5. In the text ﬁeld, type the text you want to link. The default is the gallery name. 
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Formatting the Thumbnail Page 


The text link appears on the thumbnail page in the format set by the SiteStyle 
for linked text. See “Editing the Text Elements of SiteStyles” on page 251. 


If you use a text link, you can place additional objects on the thumbnail page. 


6. Click the Photo Page tab to continue formatting, or click Done to close the 
editor. 


Selecting a Thumbnail Template 


To give site visitors direct access to each photo in the gallery, you can display a 
small version of each photo on the thumbnail page. NetObjects Fusion provides a 
variety of thumbnail templates that you can use to format these images; for 
example, one template looks like a ﬁlm strip and another like 35mm slides. 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 
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3. Display the Thumbnail Page tab. 


4. In the Format section of the tab, select Thumbnails. 


5. Select a template from the drop-down list. 


Options associated with the selected template appear. For example, the slide 
template includes Style and Cell spacing, as well as the option to include and 
format photo titles. 


Information about the template and when to use it appear next to the preview 
window. 


6. Set the template options. 


7. Specify the number of columns you want to include on the thumbnail page. 


For example, if you have 8 photos in the gallery and set Columns to 4, your 
thumbnail page will have two rows of four pictures each. 


8. Continue formatting or click Done to close the editor. 
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Formatting the Photo Pages 


Formatting the Photo Pages 


NetObjects Fusion makes it easy for you to give the photo gallery professional 
polish. You can choose from a variety of layouts for the photo and its descriptive 
text and select a frame that complements your SiteStyle. The format options you 
select apply to all photo pages. 


Selecting a Photo Page Layout 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Photo Page tab. 


4. In the Layout section of the tab, select a layout. 


In the samples, the boxes with an X represent the photo, the bold line is the title 
text, and the text block is the caption. 
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5. To replace the banner text on each page with the title of the photo, select 
Display title in browser. 


If you select this option, be sure to select a layout that does not have a title. 


6. Continue formatting or click Done to close the editor. 


Selecting a Photo Frame Template 


1. In Page view, display the thumbnail page or a photo page of the gallery you 
want to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Display the Photo Page tab. 


4. In the Photo Frame section of the tab, select a template from the drop-down list. 


Options associated with the selected template appear. Information about the 
template and when to use it appear next to the preview window. 


5. Set the frame options. 


6. Continue formatting or click Done to close the editor. 


Navigating Between Photo Pages 


1. In Page view, display the photo page of the gallery you want to work with. 


The ﬁrst photo in the gallery appears. 


Previous and Next 


2. Use the Previous and Next buttons on the control bar to move from photo to 
photo. 
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Setting Up Navigation for Site Visitors 


Setting Up Navigation for Site Visitors 


NetObjects Fusion automatically inserts navigation buttons with smart links on the 
photo pages. Site visitors can use these buttons to go to the next and previous photo 
pages and to return to the thumbnail page. 


The images used for these buttons—SPNavLeft.gif, SPNavRight.gif, and SPNavUp.gif—are 
in the NetObjects Fusion 7\NetObjects System folder. 


If you do not want to use these buttons, you can delete them and set up your own 
smart links between pages. See “Adding Navigation Buttons to Stacked Pages” on 
page 444. 


Saving a Photo Gallery Proﬁle 


Netobjects Fusion allows you to save the settings associated with your newly 
created photo gallery so it can be the basis for the next photo gallery created. 


When you save a proﬁle, you save the 


✦ Photo image output 


✦ Thumbnail image output 


✦ Thumbnail page settings (including format, template, style and columns) 


✦ Photo page settings (including layout, text attributes. title in banner, 
template and style. 


To save a proﬁle: 


1. In Page view, display the thumbnail page or photo page of the gallery you want 
to work with. 


2. Open the Photo Gallery Properties Editor. 


3. Click Save Proﬁle. 


Note that the output settings displayed at the time you save your proﬁle will be 
stored in your proﬁle will be stored in your proﬁle. These output settings will 
apply to all images created with this proﬁle in the new gallery. 
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4. Type a name for the new proﬁle. 


If you choose the name of an existing proﬁle, it will replace the existing proﬁle, 


5. Click OK. 


Note: Not all settings are saved in your proﬁle. Rotation, records associated with photos (such 
as path, caption and title) and Thumbnail page text links are not included in a saved 
proﬁle. 


Removing a Photo Gallery 


1. In Page view, display the thumbnail page of the gallery you want to remove. 


2. Select the photo gallery object and delete it. 


3. Go to Site view. 


4. Delete the photo page associated with the gallery. 


When you add a new photo gallery, the name of the gallery you just removed still 
appears in the Insert an existing Photo Gallery list in the Add Photo Gallery dialog. 


To delete a photo gallery completely from your site: 


1. Go to Assets view. 


2. Select the Data Objects tab. 
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Removing a Photo Gallery 


3. Select the photo gallery you want to delete. 


4. Press Delete. 


You can delete a photo gallery only if you have ﬁrst removed it from your site as 
described above. 
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Adding Tables 
15 


Presenting information in tabular format is often an effective way to convey 
complex concepts and ideas. NetObjects Fusion makes it easy to add tables to a 
site. You can select and work with a whole table, just a row, just a column, a single 
cell, or several rows, columns, or cells. Each of these objects has its own properties 
palette and its own HTML button, so you can apply HTML to the cell, row, column, 
or table. 


This chapter describes: 


✦ Adding tables 


✦ Setting table structure 


✦ Working with cells 


✦ Adding text and pictures to tables 
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Adding a Table 


Adding a Table 


Table tool 


1. In Page view, choose the Table tool from the Container ﬂyout on the Standard 
toolbar and draw a box where you want to position the table. 


The Create Table dialog appears. 


2. Specify the number of columns and rows in the table and click OK. 


The table appears with the Table Properties palette. These properties apply to 
the entire table; you can also select a row, column, or individual cell and set its 
properties. See “Setting Row and Column Properties” on page 227 and “Setting 
Cell Properties” on page 228. 


Each table, column, row, and cell is an individual object. You can view the object 
hierarchy by choosing Object Tree from the View menu. You can also see which 
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table object is selected by referring to the Object Tree palette. You can rename 
tables and cells in the Object Tree palette, but you cannot rename rows or columns. 


You can add an action to a table or cell using the Actions tab on the Properties 
palette. 


Setting Table Properties 


1. In Page view, select the table and make sure the General tab of the Table 
Properties palette is displayed. 


2. If the table is embedded in a text box, you can choose Fixed width or Relative 
width. If the table is not in a text box, these options are not available. 


✦ If the text box containing the table is sized to the Layout, set to wrap to the 
browser width, and the MasterBorder margins are set to zero, you can use 
Relative width to size the table as a percentage of the text box. If a site 
visitor resizes the browser window, the table will resize accordingly. 


✦ Use Fixed width to ensure that NetObjects Fusion creates a table that does 
not resize if the site visitor resizes the browser window. 


3. Enter a thickness for the table border. Thickness is measured in pixels. 


4. Set the Cell padding, which is the amount of space between the contents of a 
table cell and the cell boundaries. Cell padding is measured in pixels. 
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Adding a Table 


5. Set the Cell spacing, which is the distance between cells. 


6. In the Advanced section of the General tab, select: 


✦ 
Generate <COL> tags to render the table quickly in Microsoft Internet 
Explorer 4.0 browsers. This option must be selected if you want to add 
HTML to a table column. 


✦ 
Generate non-breaking spaces to prevent empty cells from collapsing in 
Netscape Navigator and Microsoft Internet Explorer. 


When this option is selected, NetObjects Fusion inserts a space character in 
every table cell. If you embed an image in a table cell, the extra space causes 
a gap between the image and the cell border. To remove the gap, clear this 
option. 


✦ 
Generate width on all cells to improve rendering speed and WYSIWYG in 
both Netscape Navigator and Microsoft Internet Explorer browsers. 


7. To make the table a form, select Table is a form. See Chapter 25, “Designing 
and Implementing Forms.” 


You can add HTML code to a table. See Chapter 28, “Working with HTML 
Directly.” You can also convert a table into a Layout Region by right-clicking the 
table and selecting Convert Table to Layout Region from the shortcut menu. See 
“Working with Layout Regions” on page 110. 


Setting the Table Background 


You can have both a color and a picture in the table background. If the picture has a 
transparent area, the background color shows through. 


1. In Page view, select the table. 


2. Click the Background tab on the Table Properties palette and in the Color ﬁeld, 
select: 


✦ 
Automatic to set the table background to the color speciﬁed by its parent 
object. 


Table border 


Cell spacing 


Cell padding 
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✦ 
Color to select a background color from the Color Picker. The selected color 
appears in the box to the right of the Color ﬁeld. To change the color, click 
the box and select a new color from the Color Picker. 


3. In the Image ﬁeld, select: 


✦ 
Automatic to set the background to the image speciﬁed by the table’s parent 
object. 


✦ 
Browse to select an image from the Picture File Open dialog. See “Choosing 
an Image Format” on page 182. If the picture is smaller than the table, the 
browser tiles the image. If you select a picture with a transparent color, the 
background color shows through. To change the image, click the Browse 
button to the right of the ﬁeld. 


Adjusting the Table Structure 


You can resize, add, or delete rows and columns, and merge or split cells to design 
the table structure. 


Resizing Table Rows and Columns 


➲ In Page view, select the table, and: 


✦ Drag the cell guides on the vertical or horizontal ruler to resize a row or 
column. This changes the overall table height or width. 


✦ Point to the border of the row or column you want to resize and drag the cell 
boundary to the new size. If you resize a row, it changes row height and the 
overall table height. 


Use these handles to move 
the table 


Use these handles to change 
the row height 


Use these handles to change 
the column width 
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Adjusting the Table Structure 


✦ For precise sizing of rows and columns, or to make all rows or all columns 
the same size, see “Setting Row and Column Properties” on page 227. 


Inserting a Row or Column 


1. In Page view, select the table. 


2. Select a row or column by moving the mouse pointer over the table border and 
clicking when you see the single-headed arrow. 


3. Right-click to display the shortcut menu. 


✦ To insert a row at the bottom of the table, or a column at the right side of the 
table, select Append Row or Append Column. 


✦ To insert a row above the selected row, or a column to the left of the selected 
Column, select Insert Row or Insert Column. 


Removing a Row or Column 


1. In Page view, select the table. 


2. Select the row or column you want to delete by moving the mouse pointer over 
the table border and clicking when you see the single-headed arrow. 


3. Right-click and select Delete Row or Delete Column from the shortcut menu. 


Merging and Splitting Table Cells 


1. In Page view, select the cells in the table that you want to merge or split. See 
“Selecting Table Cells” on page 228. 


2. Right-click to display the shortcut menu. 


✦ To divide the cell, select Split Cells and enter the number of rows and/or 
columns you want to split the cell into in the Split Cells dialog. The 
maximum is 10 x 20. 


✦ To merge cells, select Merge Cells. All borders between the selected cells 
disappear. 
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Setting Row and Column Properties 


When you select a table row or column, a Row or Column tab is added to the Cell 
Properties palette. 


1. In Page view, select the table. 


2. Select a row or column by moving the mouse pointer over the table border and 
clicking when you see the single-headed arrow. Drag to select multiple rows or 
columns. 


The Cell Properties palette appears with the Row or Column tab added. 


3. Set the Vertical and Horizontal Alignment to position objects within cells. 


4. Set Row height or Column width. 


✦ Display the Row tab of the Cell Properties palette. To make all selected rows 
the same height, make sure the Speciﬁed option for each row is selected and 
then set the row height. You can use this option to set the height for any 
individual row. If Speciﬁed is cleared, rows maintain their individual 
heights. 


✦ Display the Column tab of the Cell Properties palette. To make selected 
columns the same width, enter a number in the Column width ﬁeld, and 
press Enter. To size each selected column to its contents, click Fit to 
Contents. 


5. To make the row a form, select Row is a form. See Chapter 25, “Designing and 
Implementing Forms.” Due to limitations of HTML, you cannot make a column 
a form. 


Row properties 
Column properties 
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Working with Table Cells 


You can add HTML code to a row or column. See Chapter 28, “Working with 
HTML Directly.” 


Working with Table Cells 


Each table cell is an individual object. You can set alignment of its content, choose 
a background color and picture, format text, make the cell a form, or add HTML. 


Selecting Table Cells 


1. Click a cell. 


2. Move the pointer over the cell and hold down the left mouse button. 


3. When you see the cross-shaped pointer, drag it over the cells you want to select. 


Selected cells are highlighted with a border. 


Setting Cell Properties 


1. In Page view, click a cell in a table to select it. 


The Cell Properties palette appears. 


2. If necessary, click the Cell tab. 


3. Set the Vertical and Horizontal Alignment for the cell. If the cell alignment is set 
to Automatic, the alignment of the row or column containing the cell is shown 
in parentheses. If you select a different setting for the individual cell, it 
overrides the row or column setting and is shown in parentheses. 
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✦ 
Vertical determines alignment to the top, middle, or bottom of the cell. 


✦ 
Horizontal determines alignment to the left, center, or right of the cell. If the 
cell contains text, you can justify it within the cell. 


4. Set the cell background. You can use both a color and a picture. 


✦ To change the background color, in the Color ﬁeld select: 


✧ 
Automatic to set the cell background to the color speciﬁed for the table. 


✧ 
Color to select a background color for the cell from the Color Picker. The 
selected color appears in the box to the right of the Color ﬁeld. To 
change the color, click the box and select a new color from the Color 
Picker. 


✦ To change the background image, in the Image ﬁeld, select: 


✧ 
Automatic to set the background to the image used by the table. 


✧ 
Browse to select an image for the cell background from the Picture File 
Open dialog. See “Choosing an Image Format” on page 182. If the 
picture is smaller than the cell, the browser tiles the image. If you select 
a picture with a transparent color, the background color shows through. 
To change the image, click the Browse button to the right of the ﬁeld. 


5. To apply text styles and formatting to cells, click the Format tab. See 
Chapter 12, “Designing with Text.” 


6. To make the cell a form, select Cell is a form. See Chapter 25, “Designing and 
Implementing Forms.” 


7. Select Cell is a header to format the cell as a column or row heading. This 
makes it easier for people with disabilities to read the table. 


You can also add HTML code to a cell. See Chapter 28, “Working with HTML 
Directly.” 


Sizing Cells 


To make a table cell shrink to ﬁt the content in the cell: 


1. Right-click in the cell you want to size. 


2. Select Fit Cell from the shortcut menu. 


The cell shrinks to ﬁt the content. 
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Working with Table Cells 


Adding Text and Pictures to Cells 


Working in a table cell is the same as working in a text box. You can: 


✦ Add and format text. You can apply formats to all selected cells at one time. See 
Chapter 12, “Designing with Text.” 


✦ Embed objects. See “Embedding Objects in a Text Box” on page 119. 


✦ Wrap text around objects. See “Wrapping Text around Objects” on page 121. 


✦ Modify text box properties. See Chapter 9, “Working with Text Boxes.” 


To select the contents of a cell: 


➲ Double-click the cell. 


Cross-hatching appears around the selected cell. You can edit the text in the cell 
or change cell properties. 
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Drawing Shapes and Lines 16 


Shapes and lines are essential building blocks for your page designs. You can draw 
rectangles, rounded rectangles, ellipses, and polygons, as well as HTML horizontal 
rules, lines, or SiteStyle lines, and set shape and line properties. 


This chapter describes: 


✦ Drawing shapes and setting properties 


✦ Drawing horizontal rules 


✦ Adding SiteStyle lines 


✦ Drawing and editing lines and arrows 
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Drawing Shapes 


Drawing Shapes 


To draw an ellipse, rectangle, rounded rectangle, or polygon: 


Draw Rectangle tool 


1. In Page view, select the Draw tool on the Standard toolbar and choose the shape 
you want to add from the ﬂyout. 


2. Draw the shape on the page. 


✦ To draw a rectangle, ellipse, or rounded rectangle, click and draw the shape. 


✦ To draw a polygon, click to set the start point, click to set all-but-the-last 
points, and double-click the last point. 


The Properties palette for the shape you created appears. 


3. Type an alt tag in the AltTag ﬁeld. 


See “Adding and Modifying Alt Tags” on page 84. 


4. In the Line width box, set the shape outline thickness. 


To make the border invisible, set it to zero. 


5. In the Color section of the Properties palette, click the Fill Color button. In the 
Color Picker, select the color you want to assign to the shape ﬁll and click OK. 


6. Click the Line Color button. In the Color Picker, select the color you want to 
assign to the shape border and click OK. 


7. To adjust the shape, drag its handles. 


When you draw a 
shape, the appropriate 
properties palette 
appears 
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✦ To change the shape proportionally, drag a corner handle while holding 
down Ctrl. 


✦ To vary the curve of a rounded rectangle, select it, place the pointer over the 
inside corner handle until it changes to a four-headed arrow, then drag 
toward the inside or outside of the shape. 


✦ To edit the lines of a polygon, select it, place the pointer over any handle 
until you see the four-headed arrow, then drag the handle to adjust the shape. 


8. To add text to a shape, see “Adding Text to a Shape or Picture” on page 172. 


When you publish a page with shapes, NetObjects Fusion generates each shape as a 
.gif ﬁle. If the page contains more than one shape of the same type, NetObjects 
Fusion adds a number to the shape’s ﬁle name. For example, the ﬁrst rounded 
rectangle you draw is named a_Rounded_Rectangle.gif, the second one is named 
a_Rounded_Rectangle1.gif, the third a_Rounded_Rectangle2.gif, and so on. 


Adding HTML Horizontal Rules 


HTML rules are always horizontal. They can display with or without beveled edges 
in a browser. When you embed an HTML rule in a text box, you can set its length as 
a percentage of the text box width. 


To draw an HTML horizontal rule: 


HR Rule tool 


1. In Page view, select the Line tool on the Standard toolbar and choose the HR 
Rule tool from the ﬂyout. 


2. Draw the horizontal rule on the page. 


Use this handle to modify the curve 
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Adding a SiteStyle Line 


The HR Rule Properties palette appears. 


3. In the Thickness box, set the thickness of the rule. 


The standard width is 2 pixels. 


4. Select Shaded to create a bevel effect. 


The standard HR rule is shaded. 


5. If the HR rule is embedded in a text box, you can specify its length as a 
percentage of the text box. 


Adding a SiteStyle Line 


You can use SiteStyle lines to divide a page into sections. A SiteStyle line is part of 
the current SiteStyle. See Chapter 17, “Using SiteStyles.” 


SiteStyle Line tool 


1. In Page view, select the Line tool on the Standard toolbar and choose the 
SiteStyle Line tool from the ﬂyout. 


2. Click where you want to position the left end of the line. 


This option appears only when the 
rule is embedded in a text box 
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The SiteStyle Line Properties palette appears. 


3. To select a different image for the line, click Custom Image and choose an 
image in the Picture File Open dialog. 


4. To use a line from a different SiteStyle, click Other and select a SiteStyle from 
the drop-down list. 


If you change SiteStyles, NetObjects Fusion updates the line. A SiteStyle line is a 
.gif ﬁle. 


You can change the size of the SiteStyle line by dragging a handle. However, if you 
assign a new SiteStyle, the line returns to its default size. 


Drawing Lines and Arrows 


Line Draw tool 


1. In Page view, select the Line tool from the Draw tool ﬂyout on the Standard 
toolbar. 


2. Drag from one point to another to set the position, length, and orientation of the 
line. 


The point where you start dragging is the head of the line. The point where you 
ﬁnish is the tail of the line, regardless of the direction you drag. To constrain the 
line to vertical or horizontal, hold down the Shift key while dragging. 


NOF7.5UG~1.BOO Page 235 Thursday, January 21, 1904 11:14 PM 


236 


Drawing Lines and Arrows 


The Line Properties palette appears. 


3. Type an alt tag in the AltTag ﬁeld. 


See “Adding and Modifying Alt Tags” on page 84. 


4. In the Line width box, set the width of the line in pixels. 


5. In the Color section, click the Color button for the line, head, and tail, choose a 
color in the Color Picker, and click OK. To set all three items to the line color, 
select All parts use one color. 


6. In the Style section, select styles for the head and tail from the drop-down lists. 


If you want the head and tail to share the same style, select the style for the 
head, then select Head/Tail same style. 


Select Outline to assign the line color to the head and tail outlines, regardless of 
their ﬁll colors. 


When you publish a page with drawn lines, NetObjects Fusion generates each one 
as a .gif ﬁle. On your page, each line occupies the rectangular area deﬁned by the 
beginning and ending points of the line. 


If the page contains more than one shape of the same type, NetObjects Fusion adds 
a number to the shape’s ﬁle name. For example, the ﬁrst line you draw is named 
a_ArrowLine.gif, the second one is named a_ArrowLine1.gif, the third 
a_ArrowLine2.gif, and so on. 
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Editing Lines and Arrows 


To change the length and width of a line, or to change the shape and size of the 
line’s head and tail: 


1. In Page view, select the line. 


Selection handles appear. 


Place the pointer over a selection handle. The pointer changes to a crosshair. 


✦ To make the line longer or shorter, or to change its direction, drag an end 
handle. 


✦ To make the line thicker or thinner, drag a side handle. 


✦ To change the shape of the head or tail, drag one of its handles. 


2. In the Style section of the Line Properties palette, select a style from the Head 
or Tail drop-down lists to change the head or tail style. 
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Using SiteStyles 
17 


SiteStyles are sets of thematic elements you can apply to your site. Some style 
elements are graphic and others affect the appearance of text on your pages. In 
Style view, you use SiteStyles to create the look and feel of your entire site. 
NetObjects Fusion comes with a number of professionally designed SiteStyles that 
you can use to design your site. 


You can use SiteStyles as they are or edit them. You can also create SiteStyles using 
your own artwork. 


This chapter describes SiteStyles and how to use them, including: 


✦ Applying SiteStyles 


✦ Editing the graphic and text elements of a site 


✦ Creating SiteStyles 


✦ Creating text styles 


✦ Adding and removing SiteStyles 


✦ Styles folder structure 
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What Is a SiteStyle? 


What Is a SiteStyle? 


A SiteStyle is a collection of graphic and typographical elements you can apply to 
every page in your site to create its look and feel. Your site’s SiteStyle gives it a 
consistent look that survives variations introduced by your site visitor’s browser. 
When you change the SiteStyle, NetObjects Fusion automatically updates every 
page in your site with the new look. 


If you do not ﬁnd a pre-built style that is appropriate for your site, you can create 
your own custom SiteStyle. Or, if a SiteStyle works for most, but not all, pages in 
your site, you can customize it for just a few pages. For even more ﬂexibility—for 
example, to use more than one banner image in your site or to use a different image 
for each button in a navigation bar—you can use the Navigation Bar and Banner 
Properties palettes in Page view. See Chapter 18, “Creating Navigation Bars and 
Banners.” 


Exploring Style View 


Style view 


When you click the Style button on the control bar, NetObjects Fusion displays 
Style view. 


Note: If you see the View tips, open a site to see the list of SiteStyles. 


Style view shows a list of SiteStyles available for the current site and the graphic 
and text elements of the selected SiteStyle. When you ﬁrst launch NetObjects 
Fusion, you will see 3 SiteStyle lists. 


✦ Active SiteStyles. These are SiteStyles associated with a speciﬁc .nod. Active 
SiteStyles are added to your user sites folder at \NetObjects Fusion\User 
Sites\Styles. If you export your site as a template, only the active styles will be 
included. 


It is recommended that you keep only those styles currently being used active. 


✦ Local SiteStyles. These are SiteStyles included with NetObjects Fusion. Local 
SiteStyles are not speciﬁc to one .nod ﬁle and can be made active at any time. 
The Local SiteStyles list displays the SiteStyles located in NetObjects 
Fusion\styles and are available for all .nod ﬁles. 


✦ Online SiteStyles. These are SiteStyles located on a Web server. Online 
SiteStyles are created in an XML format and are available to all NetObjects 
Fusion users. 
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You must be connected to the Internet to set or activate an Online SiteStyle. 


Warning: Removing an Active SiteStyle or a Local SiteStyle will remove the style permanently. 
See “Removing SiteStyles” on page 261 


Click the Graphic tab to see the graphic elements of the currently selected 
SiteStyle. Click the Text tab to see the text elements, which show how the site’s text 
appears on the page. 
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Exploring Style View 


List of SiteStyles 


Graphic tab 


Graphic 
elements 
of the 
selected 
style 


Currently selected 
SiteStyle 


Text 
elements 
of the 
selected 
SiteStyle 


Text tab 
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Each NetObjects Fusion SiteStyle is composed of graphic and text style elements. 


On the Graphic tab you see samples of the: 


✦ 
Banner. Image containing the banner text and color. 


✦ 
Primary navigation bar. Images of navigation buttons as they appear and behave 
on the primary navigation bar. 


✦ 
Secondary navigation bar. Images of navigation buttons as they appear and 
behave on the secondary navigation bar. 


✦ 
Primary buttons. Design of the primary buttons in regular, highlighted, regular 
rollover, and highlighted rollover states. 


✦ 
Secondary buttons. Design of the secondary buttons in regular, highlighted, 
regular rollover, and highlighted rollover states. 


✦ 
Data list icons. Bullet graphic displayed when you use a data object to create a 
data list. 


✦ 
Background. Color or image used as a background of the page. 


✦ 
SiteStyle line. Image for lines placed with SiteStyle Line tool. 


The name of the SiteStyle designer is listed above the graphic elements at the top of 
the view. 


On the Text tab you see samples of: 


✦ 
Body. Body text style that sets the overall text style for the entire site. The 
background of the Body is the same as the background shown on the Graphic 
tab. 


✦ 
Normal(P). Style for text that you type in normal paragraphs. 


✦ 
Text Object. Style for text that you type in text objects. 


✦ 
Text Navbar. Style used for text navigation bars. 


✦ 
Link. Text style and colors for text used for links. Changes made to the link style 
affect the Text Navbar style. 


✦ 
Unordered List. Image and text style for bullet lists. 


✦ 
Ordered List. Numbering and text style for numbered lists. 


✦ 
Headings. Text styles for H1 through H6 heads. 
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Applying SiteStyles 


By default, navigation banners, buttons, text, lists, and other site design elements 
obtain their images and text attributes from the SiteStyle assigned to the site. When 
you apply a SiteStyle, NetObjects Fusion automatically applies style elements 
throughout your site. For example, it replaces all the buttons in your navigation bars 
with images from the style you specify, while maintaining the relevant links. 


To apply a SiteStyle: 


1. In Style view, select a SiteStyle from the list of SiteStyles. 


The elements of the selected style appear. 


Set Style 


2. Click the Set Style button on the control bar. 


NetObjects Fusion adds the style to your Active SiteStyle list and applies the 
style to your site. 


When you go to Page view, you see the new style elements and text attributes on 
each page. 


Editing the Graphic Elements of SiteStyles 


You can edit any graphic element of an existing style to customize it. For instance, 
if you like every element of a style except the banner, you can change just the 
banner image. The image for every banner in your site changes to the new image. 


You can also customize SiteStyle elements for some, but not all pages. See 
Chapter 18, “Creating Navigation Bars and Banners.” 


Note: When you edit a SiteStyle, every site that uses the SiteStyle is affected. Your \Styles 
folder stores only one copy of a SiteStyle. When you change it, the change appears in all 
sites that use that SiteStyle. If the style you want to change is used in other sites and 
you don’t want them to be affected, create a new style from the original style. See 
“Creating a SiteStyle” on page 254. 
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Removing the Read Only Setting 


All SiteStyles delivered with NetObjects Fusion are set to Read only. Before you 
can edit a SiteStyle, you must remove the Read only setting. 


1. In Style view, select the SiteStyle you want to edit from the list of SiteStyles. 


2. Click in the view so the Style Properties palette appears. 


3. Clear the Read only option on the Style Properties palette. If you don’t remove 
the check mark, you cannot edit the selected SiteStyle. 


Editing Banners and Buttons 


With SiteStyles, you can choose any font on your system for banner and button text 
and any image for the banner or button background. NetObjects Fusion 
dynamically generates image ﬁles for these banners and buttons using the font and 
images you specify for each element. This means that on buttons and banners, your 
site visitors see the fonts you select regardless of their browser or the fonts installed 
on their systems. 


1. In Style view, select the style you want to change from the list of SiteStyles and 
clear the Read only option. 


2. On the Graphic tab, click the banner or button state you want to edit. 
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Editing the Graphic Elements of SiteStyles 


The Properties palette appears for the banner or selected button state. 


3. Select the font face, size, and style for the text. 


4. Click Color and select a color from the Color Picker. 


5. To position the text on the banner or button, set the Horizontal and Vertical 
positions. 


If horizontal button position is set to Left or Right, or vertical position is set to 
Top or Bottom, you can use the Offset option to move the text label on the 
button in small increments. As you change the offset, you can see the text move 
on the button in Style view. 


6. To rotate the text, click the up or down rotation buttons. Click Right angles to 
limit the rotation to 90-degree increments. If you clear the Right angles box, 
clicking the rotation buttons increments the rotation angle and rotates the text. 
You can also type a number in the box. 


7. Select an option for multi-line alignment if the banner or button text is more 
than one line. 


8. To edit the banner or button image, click the Image tab. 


Each button state has its own Properties palette, so you can vary the images 
used on a navigation bar. For example, you can choose a happy face for the 
primary highlighted button and a neutral face for the primary regular button. 
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The Properties palette shows the current image. 


9. To select a new image, click Browse, and select a ﬁle in the Picture File Open 
dialog. 


You can select images from your site assets or from any folder on your hard 
disk. For best results, use an image that is the same size as the button or banner. 


The images on the Style view Graphic tab reﬂect changes you make on the palettes. 
When you ﬁnish editing the buttons, check the rollover behavior using the 
navigation bar samples. 
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Editing the Graphic Elements of SiteStyles 


Editing a Navigation Bar 


In addition to editing button text and images, you can change the navigation bar 
borders and spacing between buttons. 


To edit the borders and spacing of a navigation bar: 


1. In Style view, with the Graphic tab selected, select the style you want to change 
and click the Primary or Secondary Navigation Bar Sample. 


The Primary or Secondary NavBar Sample Properties palette appears, 
depending on which navigation bar you select. 


2. Click the Border up and down buttons or enter the value directly to change the 
thickness of the border around the navigation bar. 


3. Click the Spacing up and down buttons to change the amount of space between 
the buttons. 
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Editing a Data List Icon 


Data list icons appear when you use the Data List tool to create a data list in 
Page view. See Chapter 27, “Data Publishing.” 


1. In Style view, with the Graphic tab selected, select the style you want to change 
and click a Data List icon. 


The Bullet Properties palette appears showing the name of the current data list 
icon image. 


2. Click Browse, select a new image in the Picture File Open dialog, and click 
Open. 
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Editing the Graphic Elements of SiteStyles 


Editing a Style Background 


1. In Style view, with the Graphic tab selected, select the style you want to change 
and click the Edit Style background box. 


The Page Background Properties palette appears. 


2. In the color ﬁeld, select: 


✦ 
Automatic to use the default background color set in the browser. 


✦ 
Transparent to let the image or color of a style underneath the background 
show through. For example, if the site’s paragraph text has a background 
color, setting the page background color to transparent lets the paragraph 
background color show through. 


✦ 
Color to use a solid color background. To choose a different color, click the 
Color button and select from the Color Picker. 


3. In the Image ﬁeld, select: 


✦ 
Automatic to use the default image set in the browser. 


✦ 
None to use a background with no image. 


✦ 
Background.gif to use the SiteStyle background. 


✦ 
Browse to select another image for the background. 
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Editing the SiteStyle Line 


You can use a variety of horizontal page-wide images to separate pages into 
sections. You insert these lines in Page view using the SiteStyle Line tool, as 
described in “Adding a SiteStyle Line” on page 234. 


1. In Style view, with the Graphic tab selected, select the style you want to change 
and click the SiteStyle Line. 


The Line Properties palette appears. 


2. Click Browse, select a new image in the Picture File Open dialog, and click 
Open. 


Editing the Text Elements of SiteStyles 


You can edit any text element of an existing SiteStyle to customize it. For instance, 
if you change the Heading 3 text style, the changes appear throughout your site 
wherever that text style is applied. 


To customize style elements for some, but not all pages, you do not edit the 
SiteStyle, you edit the text in Page view. See Chapter 12, “Designing with Text.” 


When you edit a SiteStyle’s text elements, every site that uses the SiteStyle is 
affected. If the changes apply to text elements set to Automatic, the changes ﬂow 
through to the other sites. 


Note: To edit the text elements of a SiteStyle, you must ﬁrst remove its Read only setting. See 
“Removing the Read Only Setting” on page 245. 


1. In Style view, select a SiteStyle from the list of styles. 


2. Click the Text tab. 


The text elements appear. 
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Editing the Text Elements of SiteStyles 


3. Click a text element to select it. 


Note: The text styles associated with lists are List, Ordered <OL>, List, Bulleted <UL>, and 
List Item <LI>. Selecting the type of bullet character or numbering automatically 
selects the proper text style from the ordered or bulleted list. Changing the <LI> style 
affects both types of lists. 


The Properties palette for the selected text element appears. 
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The Attribute column shows the text attributes of the text element. The Value 
column shows the text format assigned to that attribute. 


The only attributes listed are those that have been edited. A text element’s 
default attributes are not listed. 


4. Click the Format button. 


The Text Format dialog appears. 


5. Edit the text settings and click OK. See “Formatting Paragraphs” on page 152 
and “Understanding the Automatic Setting” on page 149 for descriptions of the 
options in the Text Format dialog. 


A Note about the Body and Normal (P) Text Styles 


If you do not assign a font to the Body or Normal (P) text elements and leave their 
text styles set to Automatic, the browser’s proportional and ﬁxed width font settings 
are passed through to the SiteStyle for the Body text and Normal (P) text. 
Consequently, if you leave the settings as Automatic, Body and Normal (P) text 
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Creating a SiteStyle 


appear in Page view as they do in the browser. All text styles in the site are affected 
by these settings. This helps you with overall page design because you can see 
exactly how the fonts look based on the browser settings. Note that the Body and 
Normal (P) fonts are not generated when you publish your site. They are derived 
from the site visitor’s browser settings. 


If you change the text settings applied to the Body text element, some settings 
might not affect the body text on your pages. The inherited settings depend on the 
HTML output method you use when publishing your site. The following table 
shows which settings are affected: 


Creating a SiteStyle 


You can create original styles to give your site a unique look. When you create a 
new SiteStyle, each graphic element is saved in the \Images folder within the style’s 
folder. See “Styles Folder Structure” on page 262. 


When you create your own SiteStyle, keep these points in mind: 


✦ When you use an animated .gif for a style image, only the ﬁrst frame of the 
animation displays in the image. 


✦ Text labels for buttons and banners are placed on the images. If you want the 
label to appear above or below the image, leave space above or below the image 
when you create it in your image editing application. 


✦ If you plan to use your SiteStyle on a page with a background color or image, 
and you want the background to show through your image, make sure you set 
the background to Automatic or Transparent. 


Text Attribute 
Dynamic Page Layout 
Regular Tables 


font 
Y 
Y 


font style 
Y 
N 


size 
N 
N 


color 
Y 
Y 


position 
N 
N 


case 
N 
N 


decoration 
N 
N 


small caps 
N 
N 
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When you create a new SiteStyle, you can start with an existing SiteStyle as a 
template or a blank SiteStyle. So, before you create a new SiteStyle, select an 
appropriate SiteStyle as your starting point. 


To create a new SiteStyle: 


1. Create or collect images for your banner, buttons, lines, icons, and background. 


Use an image creation application to create the images. To be included in a 
published site they must be in .gif, .jpg, or .png format. If you use an image in 
.bmp, .pcx, .pct, or .fpx format, NetObjects Fusion can convert a copy of the 
image to .gif or .jpg for you. 


New Style 


2. In Style view, click on Active SiteStyles. 


Note: New Blank SiteStyles must be added to your Active SiteStyles list. 


3. Click the New Style button on the control bar. 


4. Enter a name for your new SiteStyle and press Enter. 


Your new style is added to the list of Active SiteStyles and is selected. 
NetObjects Fusion also creates a folder in the \Styles folder to contain the style 
elements. See “Styles Folder Structure” on page 262. 


The Read-Only option is cleared automatically so you can edit the style. 


5. Edit each graphic and text element as described in “Editing the Graphic 
Elements of SiteStyles” on page 244 and “Editing the Text Elements of 
SiteStyles” on page 251. 


Set Style 


6. Click the Set Style button to apply the new style to your site. 


Your custom SiteStyle images and settings are applied to your site. 


To create a SiteStyle using an existing template: 


1. In Style view, highlight a style in the SiteStyles list. 
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Managing SiteStyles 


2. Go to the Style menu and select Duplicate SiteStyle. 


3. Enter a name for your new SiteStyle and press Enter. 


The elements in the view look just like the style you selected as the basis for your 
new style. 


The original SiteStyle - the one you based your new design on - is not affected by 
your edits. 


Managing SiteStyles 


You can add new styles to the list of available styles, such as those you obtain from 
your colleagues or those you create on your own. You can also remove styles and 
create folders to better manage your Style view. SiteStyles are stored in folders 
labeled with the style name. Text styles and graphic styles are stored separately, and 
new text styles do not automatically transfer to a new site. 


Adding a SiteStyle 


You can add a style from any NetObjects Fusion style folder on your hard disk 
drive, CD-ROM, or LAN, and you can also download online styles. 


You add styles by ﬁrst adding a SiteStyle Source in the Style view. A SiteStyle 
Source is the location where additional styles are stored. Any SiteStyle found at this 
location will then be available in the Style view. 


Warning: SiteStyles from earlier versions of NetObjects Fusion do not include all style 
elements available in NetObjects Fusion 7.5. If you import an older style, you must 
update the style to be compatible with the new features. For example, NetObjects 
Fusion version 3.0 and earlier did not have the rollover style for buttons. Thus, if 
your style is from version 3.0 you must assign button rollover styles before the 
navigation bars can display rollovers. 
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To add an online styles source: 


1. In Style view, from the Style menu, choose Add SiteStyles Source. 


The Add SiteStyles Source dialog appears. 


2. Select Online SiteStyles as the Source Type. 


Click Next. 


Note: You must be connected to the Internet to use this feature. 


3. Enter a name for the new source. 


This is the name that will appear in the Style view. 


4. Enter the URL of the online style source. 


Click Test to verify the URL entered is valid. 


5. Click Finish. 


NetObjects Fusion adds the style source name to the style list. 


The list of online styles is displayed 
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Managing SiteStyles 


To add a local styles source: 


1. In Style view, from the Style menu, choose Add SiteStyles Source. 


The Add SiteStyles Source dialog appears. 


2. Select Local SiteStyles as the Source Type. 


Click Next. 


3. Enter a name for the new source. 


This is the name that will appear in the Style view. 


4. Type in the path or navigate to the style folder containing the styles you want to 
add. 


The path entered must include the folder where the SiteStyles are stored. For 
example, if your computer stores its styles in a folder called “Mountain Bikes”, 
the path will look similar to \SiteStyles CD\Mountain Bikes. 


Warning: If you do not specify the folder where the styles are located, all of the 
directory contents will be displayed in Style view. 


Click Test to verify the path entered is valid. 


5. Click Finish. 


NetObjects Fusion adds the style source name to the style list. 


The list of local styles is displayed 
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To add a CD style source: 


1. In Style view, from the Style menu, choose Add SiteStyles Source. 


The Add SiteStyles Source dialog appears. 


2. Select CD SiteStyles as the Source Type. 


Click Next. 


3. Enter a name for the new source. 


This is the name that will appear in the Style view. 


4. Type in the path or navigate to the styles folder located on your CD. 


The path entered must include the folder where the SiteStyles are stored. For 
example, if your SiteStyles CD stores its styles in a folder called “Mountain 
Bikes”, the path will look similar to \SiteStyles CD\Mountain Bikes. 


Warning: If you do not specify the folder where the styles are located, all of the CD 
contents will be displayed in Style view. 


Click on Find Source to have NetObjects Fusion do an automatic search for the 
styles or click Test to verify the path entered is valid. 


5. Click Finish. 


NetObjects Fusion adds the style source name to the style list. 
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Managing SiteStyles 


To add a network source: 


1. In Style view, from the Style menu, choose Add SiteStyles Source. 


The Add SiteStyles Source dialog appears. 


2. Select Network SiteStyles as the Source Type. 


Click Next. 


3. Enter a name for the new source. 


This is the name that will appear in the Style view. 


4. Type in the path or navigate to the styles folder located on your network. 


The path entered must include the folder where the SiteStyles are stored. For 
example, if your network stores its styles in a folder called “Mountain Bikes”, 
the path will look similar to \SiteStyles CD\Mountain Bikes. 


Warning: If you do not specify the folder where the styles are located, all of the 
directory contents will be displayed in Style view. 


Click Test to verify the path entered is valid. 


5. Click Finish. 


NetObjects Fusion adds the style source name to the style list. 
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SiteStyles from Imported Sites 


If you import a site built with a previous version of NetObjects Fusion, you may 
notice several additional or duplicate styles added to your Style view. Previous 
versions of NetObjects Fusion associated each style in the SiteStyles list with a site 
.nod. As a result, all of the SiteStyles included in your template are considered 
active and therefore imported into your Active SiteStyles 


You can select which SiteStyles to remove the ﬁrst time you enter Style view after 
importing a site. The current set SiteStyle, however, cannot be removed. 


Removing SiteStyles 


You can remove a style from the list of styles in the Style view. You cannot remove 
the currently applied style. When you remove a SiteStyle, its style folder and 
images associated with that style are permanently deleted. 


1. In Style view, select the style you want to remove. 


2. From the Style menu, choose Remove Style From List. 


3. Click Yes to conﬁrm. 


Removing Unused Active SiteStyles 


1. From the Style menu, select Remove Unused Active SiteStyles. 


The Remove Unused Active SiteStyles dialog appears. 


2. Place a check mark next to the SiteStyles you want to remove.. 


3. Click Remove. 
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Styles Folder Structure 


Each SiteStyle stores its images, text styles, and graphic styles in a special folder 
structure in the \Styles folder. Images are stored in the \Images folder. Text styles are 
deﬁned in Style.css and graphic styles in Style.ssx. 


When you select a new image for a style element, NetObjects Fusion copies it into 
the appropriate folder for the SiteStyle. If you’re editing an existing SiteStyle, the 
new image replaces the ﬁle previously assigned to that element. NetObjects Fusion 
copies the new image to the folder, but doesn’t overwrite the old ﬁle unless the new 
and old ﬁles have identical names. 


For example, suppose you want to modify the Mountain SiteStyle to change the 
highlighted button color. First, open P3.gif in the Mountain\Images folder and use an 
image editing application to change the button’s color. Give the new image ﬁle any 
name you like. Then in Style view, edit the Highlighted Primary Button and choose 
the edited image. The image ﬁle you select is copied to the \Images folder in the 
NetObjects Fusion 7.5\Styles\Mountain folder. If the new image ﬁle has the same name 
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as the original ﬁle, the original is overwritten. Every site you create or open on your 
machine that uses the Mountain style uses this ﬁle for highlighted primary buttons. 


This applies to all style elements that you can base on images. This also occurs 
when you replace the image for a single instance of a button or banner. See 
“Change a Button’s Image” on page 275 and “Changing a Banner’s Image” on 
page 280. 
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Creating Navigation Bars 
and Banners 
18 


NetObjects Fusion includes tools you can use to create banners and navigation bars 
that help site visitors understand and navigate the structure of your site. A new 
blank site includes a button navigation bar on the left, a text navigation bar at the 
bottom, and a banner in the top MasterBorder. You can create your own banners and 
navigation bars and place them in any MasterBorder or Layout area. 


You save time using banners and navigation bars because NetObjects Fusion 
automatically places page names on the banner and links navigation bars to pages 
in your site. Placing navigation bars in a MasterBorder and then assigning the 
MasterBorder to multiple pages is an easy way to give pages with the same 
navigational needs the same navigational structure. 


New banners and navigation bars you create use elements of the currently selected 
SiteStyle. However, you can customize the banners and buttons by assigning other 
styles or labels or by replacing their images with your own. 


This chapter tells you how to use navigation bars and banners, including: 


✦ Adding navigation bars 


✦ Setting navigation structure 


✦ Setting navigation bar properties 


✦ Adding banners 


✦ Customizing banners and navigation bars 
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Working with Banners and Navigation Bars 


Typically, in each new site you create, NetObjects Fusion automatically places a 
banner in the top margin, a button navigation bar in the left margin, and a text 
navigation bar in the bottom margin. You can place banners and navigation bars 
anywhere on the page, including MasterBorders and Layouts, as well as inside text 
boxes, table cells, and Layout Regions. 


Banner titles and button names are set to the page name by default. You can change 
the name using the Custom Names button in Site view, the Custom Names 
command on the Edit menu, the settings on the Navigation Button or Banner 
Properties palette in Page view, or the Custom Navigation Bar dialog. Buttons are 
linked according to your site’s structure. Whenever you change the SiteStructure in 
Site view, NetObjects Fusion updates the buttons and banners. 


When you preview or publish your site, NetObjects Fusion creates a .gif ﬁle for 
each button and banner. It combines the assigned font style, size, and color with the 
image ﬁle for that SiteStyle element to ensure the font you choose appears despite 
differences in site visitors’ browsers. 


Using Navigation Bars 


Navigation bars are rows or columns of buttons or text that are automatically linked 
to other pages in your site. NetObjects Fusion provides button navigation bars and 
text navigation bars. You use the Button Navigation Bar tool and the Text 
Navigation Bar tool to add navigation bars to MasterBorders or page Layouts. 


The style for buttons is determined by the SiteStyle you set in Style view. See 
Chapter 17, “Using SiteStyles.” The SiteStyle button picture is automatically 


Button navigation bar 


Text navigation bar 


Banner 


Button 
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applied to buttons throughout your site. You can change the button style for an 
individual navigation bar or even an individual button without changing the overall 
SiteStyle. See “Setting Button Navigation Bar Properties” on page 272 and 
“Change a Button’s Image” on page 275. 


You can assign an action to any navigation bar using the Actions tab of the 
Navigation Bar Properties palette. For example, a navigation bar could ﬂy in from 
the top when the site visitor opens the page. See Chapter 23, “Building Dynamic 
Pages.” You cannot assign an action to an individual button. 


Adding a Navigation Bar 


You can add a horizontal or vertical button or text navigation bar to a page. 


1. In Page view, display the page on which you want to place the navigation bar. 


Button Navigation 
Bar tool 


2. Select the Button Navigation Bar tool or the Text Navigation Bar tool from the 
Navigation ﬂyout on the Standard toolbar. 


3. Drag a box in the MasterBorder or Layout area where you want to place the 
navigation bar. 


Text Navigation 
Bar tool 


Drag in a horizontal direction for a horizontal navigation bar or in a vertical 
direction for a vertical navigation bar. 


A new navigation bar appears with buttons or text linked to the pages indicated in 
the Navigation structure and Multi level options sections of the General tab of the 
Navigation Bar Properties palette. 


Highlighted button 


Button navigation bar 
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Setting Navigation Bar Type 


You can choose primary, secondary, or text navigation bars. 


Primary and secondary navigation bars offer different sets of button pictures, which 
are deﬁned by the current SiteStyle. Other than the pictures displayed, primary and 
secondary navigation bars function the same way. Because secondary button 
pictures are typically different in size, shape, or color, you can use a secondary 
navigation bar to visually distinguish links to different parts of your site. For 
example, to help site visitors understand the SiteStructure, you can use the 
secondary navigation bar for the lower levels of your site. To see the difference 
between primary and secondary navigation bars, go to Style view. 


Text navigation bars provide navigation for visitors whose browsers cannot display 
picture buttons. 


To set navigation bar type: 


1. In page view, select the navigation bar. 


The General tab of the Navigation Bar Properties palette appears. 


2. In the Display section, select Primary, Secondary, or Text type. 


Note: You can change the type of Child page and JavaScript submenu buttons on 
the Advanced tab of the Navigation Bar Properties palette. 


Setting Navigation Bar Orientation 


1. In Page view, select the navigation bar. 


The General tab of the Navigation Bar Properties palette appears. 


2. In the Display section, select Vertical or Horizontal orientation. 
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Setting Navigation Structure 


You set the navigation structure to specify the relationship between the current page 
and the pages linked to the buttons on the navigation bar. You can base navigation 
structure on the site structure or create custom navigation bars to give visitors 
access to pages on different levels of the site, pages in other sites, and ﬁles. 


Creating Navigation Bars Based on the SiteStructure 


You can choose a navigation level and then set the multi level options to add links 
to other pages in the site. Go to Site view or open the Site Navigation palette if you 
are unsure about the site levels you want to link. 


Note: If you create a navigation bar with no valid links, NetObjects Fusion displays a question 
mark. 


1. In Page view, select the navigation bar. 


The General tab of the Navigation Bar Properties palette appears. 


2. In the Navigation structure section, choose a level from the drop-down list. 


✦ 
First Level links to the children of the Home page. 


✦ 
Parent Level links to pages in the level above the current page in the 
SiteStructure. 


✦ 
Current Level links to the current page and all other pages that share the same 
parent page. 


✦ 
Child Level links to the children of the current page. 


3. In the Multi level options section, select: 


✦ 
Include home page to add a Home page link to the navigation bar. 


✦ 
Include parent page to include a link to the parent page in the navigation bar. 
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✦ 
Include child pages to include links to the child pages in the navigation bar. 


✦ 
Include JavaScript submenus to make child pages not included in the 
navigation bar visible when the site visitor moves the pointer over the parent 
page link. 


Use JavaScript submenus to make child 
pages not included in the navigation 
bar visible when the site visitor moves 
the pointer over the parent page link 


NOF7.5UG~1.BOO Page 270 Thursday, January 21, 1904 11:14 PM 


Chapter 18 
Creating Navigation Bars and Banners 


271 


Creating a Custom Navigation Bar 


1. In Page view, select the navigation bar. 


The General tab of the Navigation Bar Properties palette appears. 


2. In the Navigation structure section, select Custom and click Edit Custom. 


The Custom Navigation Bar dialog appears. 


3. From the Link type drop-down list, select: 


✦ 
Internal Link to link to another page in the site. 


Select a page in the list on the left and click Add to move it into the list on 
the right, or drag it from the left to the right. 


✦ 
External Link to link to a page in another site. Type the path to the page you 
want to link to; for example, http://www.netobjects.com and click Add to 
move it into the list, or drag it from the left to the right. 


✦ 
File Link to link to a ﬁle. Type the path to the ﬁle you want to link to or click 
Browse to locate the ﬁle, click Save, and then click Add to move it into the 
list or drag it from the left to the right. 
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If your site has many pages and a lot of links, click Find to search for a speciﬁc 
link in the list of current links. Click Find Again to search for the next 
occurrence of the same link. 


4. To change the text on the button or text link, click in the Display Name column 
and type new text. 


5. In the Image column, choose Standard, Child, or Popup. (Popup is not available 
for the ﬁrst page in the navigation bar.) 


These selections correspond to the display type you selected on the General tab 
of the Navigation Bar Properties palette (Primary, Secondary, or Text) and the 
button type you selected for Child pages and JavaScript submenus on the 
Advanced tab. 


For example, if you choose Standard in the Image column, it will be a primary 
button if the display or button type is Primary and a secondary button if the 
display or button type is set to Secondary. 


If you are customizing a text navigation bar, this option is not available. 


6. To arrange the order of buttons on the navigation bar, use the Move up and 
Move down buttons or simply drag the buttons into position. 


To remove a button, select it and click Remove. To clear the list and start over, click 
Remove All and click Yes to conﬁrm. 


Setting Button Navigation Bar Properties 


Set Button Style 


New navigation bars use the currently applied SiteStyle, but you can set individual 
navigation bars to use any available SiteStyle. 


You can also choose whether the button for the current page will be highlighted or 
not. Use button highlighting to show site visitors which page they are on. If you are 
using AutoFrames, be aware that highlighting affects the way the browser refreshes 
your page. 


You can also enable rollover buttons on the navigation bar. If rollover is on, when a 
site visitor moves the pointer over the button, the SiteStyle rollover image appears. 


A highlighted 
button indicates 
the current page 
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To set the button style: 


1. In Page view, select the navigation bar. 


2. Click the Background tab of the Navigation Bar Properties palette. 


3. In the Button style section: 


✦ Select Other and choose a SiteStyle from the drop-down list. 


Note: You can change the SiteStyle of Child page and JavaScript submenu buttons 
on the Advanced tab of the Navigation Bar Properties palette. 


✦ Turn highlighted buttons on or off. 


✦ Turn rollover buttons on or off. 


Set Button Background 


You can set a background color for a button navigation bar. A background color can 
visually unify a navigation bar if buttons are widely spaced; it can also help site 
visitors distinguish the navigation bar from the background of the page. 


1. In Page view, select the navigation bar. 


2. Click the Background tab of the Navigation Bar Properties palette. 


3. In the Background color section, click the Color button and select a color from 
the Color Picker or select None to use no background color. 
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Set Border Width and Button Spacing 


You can set the thickness of a button navigation bar’s border, as well as the spacing 
between buttons. You can increase the spacing between buttons to let the 
background show through or to add visual breaks around buttons. The border and 
spacing are measured in pixels regardless of the measurement unit you select in the 
Options dialog. You cannot change the spacing or border for text navigation bars. 


To set button border and spacing: 


1. In Page view, select the navigation bar. 


The Navigation Bar Properties palette appears. 


2. Click the Background tab. 


3. In the Display (in pixels) section: 


✦ To change the thickness of the navigation bar border, enter a number in the 
Border ﬁeld or click the arrows. 


✦ To change the spacing between buttons, enter a number in the Spacing ﬁeld 
or click the arrows. 


Change a Button’s Name 


By default, a button name is the same as the page name. 


To change the text on a button: 


1. In Page view, navigate to the page containing the navigation button you want to 
change. 


2. Double-click the button to select it. 


A wide border surrounds the button to show it is selected. 
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The General tab of the Navigation Button Properties palette appears. 


3. In the Button field, type a new name for the button. To enter two lines of text, 
press Enter at the end of the ﬁrst line. 


To restore the default page name, select Use page name in button. 


This changes the button name only in the selected navigation bar. To change the 
name of all instances of this button on all navigation bars, use the Custom Names 
dialog. See “Using Custom Button and Banner Names and File Extensions” on 
page 47. 


Change a Button’s Image 


You can change the picture on each individual button in a navigation bar in Page 
view. When you assign a new picture to a button, NetObjects Fusion does not 
display the page name or custom name on the button. If you want text to appear on 
the button, you must include the text in your button picture. You do not change the 
current SiteStyle when you customize a button picture. 


To change the picture for one button: 


1. In Page view, navigate to the page containing the navigation button you want to 
change. 


2. Double-click the button to select it. 


A wide border surrounds the button to show it is selected. 


The General tab of the Navigation Button Properties palette appears. 
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3. Double-click the selected button, or click Custom Image on the Properties 
palette. 


The Picture File Open dialog appears. 


4. Select an image ﬁle from your hard disk or LAN. If you want to use an image 
that is on a CD-ROM, copy it to your hard disk ﬁrst. 


The selected button displays the new picture. To restore the original image, click 
Default Image on the Navigation Button Properties palette. 


Setting Text Navigation Bar Properties 


1. In Page view, select a text navigation bar. 


2. Click the Background tab of the Navigation Bar Properties palette. 


3. In the Color ﬁeld, select: 


✦ 
Automatic to set the background to the color speciﬁed in the Text NavBar 
style in Style view. 


✦ 
Transparent to set the background to the background color speciﬁed by the 
parent object of the text navigation bar. 


✦ 
Color to select a background color from the Color Picker. The selected color 
appears in the box to the right of the Color ﬁeld. To change the color, click 
the box and select a new color from the Color Picker. 


4. In the Image ﬁeld, select: 


✦ 
Automatic to set the background to the image speciﬁed in the Text NavBar 
style in Style view. 
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✦ 
None to eliminate the background image. 


✦ 
Browse to select an image from the Open dialog. See “Choosing an Image 
Format” on page 182. If the picture is smaller than the navigation bar, the 
browser tiles the image. To change the image, click the Browse button to the 
right of the ﬁeld. 


5. In the Delimiters section, select the characters you want to use before and after 
each link in a text navigation bar. 


The default characters are square [brackets]. You can choose angle brackets, or 
other characters, or leave this blank. 


Select Include delimiters in link to extend the underline to include these 
characters. 


6. If you are working with a horizontal text navigation bar, in the Format section, 
you can select Right, Left, or Center alignment. 


If you select Constrain to a single line, NetObjects Fusion increases the page 
width to accommodate the navigation bar on a single line. If you clear this 
option, you can reduce the width of the navigation bar so it appears on more 
than one line. 


7. By default all pages in a text navigation bar are linked except the current page. 
Select Link current page in the Options section to include a link to the current 
page. 


Text navigation bars use the SiteStyle’s linked text color and the style set for the 
TextNavBar object. See “Formatting Text” on page 148 and “Editing a Style 
Background” on page 250. 


Linked page 
Current page 


Delimiter 
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Setting a Navigation Bar Target 


When a site visitor clicks a navigation bar link, you can target a frame or a pop-up 
window to display the linked page. For example, if you select _blank as the link 
target, the page you link to appears in a new browser window. 


1. In Page view, select a navigation bar. 


2. Click the Advanced tab of the Navigation Bar Properties palette. 


3. In the Navigation bar target section, select a target from the drop-down list or 
click New Target and add a target. 


For more information on link targets, see “Setting Link Targets” on page 295. 


Using Banners 


Banners are picture title bars that display the name of the page, helping site visitors 
understand where they are in your site. You use the Banner tool to add new banners. 


You can assign an action to any banner using the Actions tab of the Banner 
Properties palette. For example, you can make a banner “grow” into existence when 


Set the banner name 
in Site view or on the 
Banner Properties 
palette 
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a site visitor goes to the page by assigning the On Page Loaded do Transition action 
with the transition type set to Iris. See Chapter 23, “Building Dynamic Pages.” 


Adding a Banner 


1. In Page view, go to the page on which you want to place the banner. 


Banner tool 


2. Choose the Banner tool from the Navigation ﬂyout of the Standard toolbar. 


3. Drag a box in the MasterBorder or Layout area where you want to place the 
banner. 


Drag in a horizontal direction for a horizontal banner or in a vertical direction 
for a vertical banner. 


A new horizontal or vertical banner appears in the current SiteStyle. 


Changing the Banner Text 


By default, the banner text is the page name, but you can specify a custom name or 
no name for the banner. You can also split banner text into two lines. The style of 
the banner text is determined by the current SiteStyle. 


To change the banner text: 


1. In Page view, select the banner. 
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The General tab of the Banner Properties palette appears. 


2. In the Banner ﬁeld, type the new text for the banner. To make the text two lines, 
press Enter at the end of the ﬁrst line. 


To restore the default page name, select Use page name. 


This changes the name only on the selected banner. To change the name on all 
banners on this page, use the Custom Names dialog. See “Using Custom Button 
and Banner Names and File Extensions” on page 47. 


Changing a Banner’s Image 


You can change the picture for a selected banner in Page view. When you assign a 
new picture to a banner, NetObjects Fusion does not display the page or custom 
banner name on the image. If you want text to appear on the banner, you must 
include the text in your banner graphic. If you change the image for a banner in a 
MasterBorder, the change does not affect the banner on all the other pages that use 
that MasterBorder. You do not change the SiteStyle when you customize a banner 
picture. 


To change the picture for one banner: 


1. In Page view, display the page containing the banner you want to change. 


2. Select the banner. 


The General tab of the Banner Properties palette appears. 


3. Double-click the banner, or click Custom Image on the Properties palette. 


The Picture File Open dialog appears. 


4. Select an image ﬁle from your hard disk or LAN. If you want to use an image 
that is on a CD-ROM, copy it to your hard disk ﬁrst. 


The selected banner displays the new picture. To restore the banner to its original 
image, click Default Image on the Banner Properties palette. 
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Setting Banner Style and Orientation 


New banners use the current SiteStyle, but you can set a banner to any available 
style. If you change the style of a banner in a MasterBorder, it changes on every 
page using that MasterBorder. 


1. In Page view, select the banner. 


The General tab of the Banner Properties palette appears. 


2. In the Style section, select Other, and choose a different style from the drop- 
down list. 


3. In the Display section, select Horizontal or Vertical orientation. 
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Creating Links and Anchors 19 


NetObjects Fusion makes it easy to create navigation aids using links. You can 
make any text, image, shape, or area of an image into a navigation aid by adding a 
link. Link page objects to any point on the Web, including points within your site. 
You can also create and link to anchors—markers at a speciﬁc location on a page— 
to aid navigation in long pages. 


This chapter tells you how to create and use: 


✦ Internal links 


✦ Anchors 


✦ Smart links 


✦ External links 


✦ Email links 


✦ Relative links 


✦ File links 


✦ Link targets 


✦ Links with added HTML 


✦ Imagemaps 
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Creating Links 


You can use the linking techniques described in this chapter to manually link 
objects such as text, pictures, and drawn shapes to internal locations in a site and 
external locations such as ﬁles and other Web pages. As you organize a site, you’re 
likely to create multiple links to the same location. You can easily update these links 
using the lists in Assets view. 


You can use the Link button on the Properties palette or click the Link tool on the 
Standard toolbar to open the Link dialog, where you specify the destination of a 
link. 


Types of Links 


There are four types of links, each with its own options in the Link dialog: 


✦ 
Internal link, which links to a page or anchor within the site. 


✦ 
Smart link, which links to a relative position in the site, such as previous page or 
next page. Smart links are sometimes called structural links. The Blank link, 
which you can use to trigger an action without going to a new page, is also a 
smart link. 


✦ 
External link, which links to a page in another site via a URL, using a protocol 
such as ftp, mailto, http, or JavaScript. 


✦ 
File link, which links to a ﬁle that visitors can download from the site. 


Link Indicators 


You can link a selected object or text, or a text insertion point. 


Link icon 


✦ If you Link an object, the Link icon indicates the object is linked. 


✦ If you select text and link it, the selected text is underlined and appears in the 
default font and color for links. 


✦ If you place an insertion point in text without selecting text, the link name is 
inserted in the text. 
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Creating an Internal Link 


Internal links link to pages or anchors within a site. If you move a linked page in the 
SiteStructure or change the page’s name, NetObjects Fusion automatically updates 
all associated links. Assets view lists the internal links in your site. 


Using an anchor, you can link to a speciﬁc page or to a speciﬁc location on the 
current page. See “Adding, Editing, and Deleting an Anchor” on page 287. 


To create an internal link: 


1. In Page view, select an object or text to link. 


If you place an insertion point in text without selecting text, the link name is 
inserted in the text. 


Link tool 


2. Click the Link tool on the Standard toolbar or the Link button on the object’s 
Properties palette. 


The Link dialog appears. 


3. Select Internal Link as the link type. 


List of all pages in the 
site 


See “Adding HTML to a 
Link” on page 297 


See “Setting Link 
Targets” on page 295 


Anchors 
on the 
selected 
page 
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✦ If you are linking to a page, select the page in the SiteStructure. 


✦ If you are linking to an anchor on a speciﬁc page, select the page in the 
SiteStructure and then select the anchor from the list on the right. 


4. To set a link target, see “Setting Link Targets” on page 295. 
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Note: You may not need to select a frame target. NetObjects Fusion automatically 
targets most internal links. If you select <none>, NetObjects Fusion uses the 
default target, which depends on the current frame setup. 


The destination page for the link appears only in the frame you select. 


5. Click Link. 


NetObjects Fusion creates the link. When a site visitor clicks the linked item, the 
browser displays the destination page or the selected anchor. 


Adding, Editing, and Deleting an Anchor 


An anchor marks a speciﬁc location on a page. Anchors let site visitors go directly 
to a particular part of a long page instead of scrolling and searching for information. 
You can place an anchor anywhere in a text box or table, or on a picture or drawn 
shape. You link to an anchor using the Link dialog. When a site visitor clicks the 
link, the browser displays the page containing the anchor, beginning at the location 
of the anchor. 


When an anchor link is in a MasterBorder or AutoFrame, use the Current page 
option in the Link dialog to ensure that the link always points to an anchor on the 
current page. If you want an anchor link to always lead to a speciﬁc page, select the 
page name instead of the Current page option when you link to the anchor. 


For example, suppose your Layout contains a very long text box. You place anchors 
at the top and bottom of the text box, and in the MasterBorder, you link the words 
To Top to the top anchor and the words To Bottom to the bottom anchor. In the Link 
dialog, instead of choosing the current page name in the Page name section, you 
choose the Current page option. If you copy that text box to another page with the 
same MasterBorder and replace its content, the To Top and To Bottom links still 
work, jumping to locations on the current page instead of the page where you made 
the links. 


To add an anchor: 


1. In Page view, select an image or drawn shape or double-click to place the 
insertion point within a line of text. 


If you place the insertion point within the text without selecting any text, the 
anchor is placed at the location of the insertion point. If you select text, the 
anchor is placed at the beginning of the selected text. 
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Anchor tool 


2. On the Standard toolbar, click the Anchor tool. 


The Add Anchor dialog appears listing anchors already on the page. 


3. Type a name for the anchor in the Name ﬁeld. The name cannot contain spaces. 
Make sure each anchor has a different name. 


4. Click OK. 


Anchor icon 


If Object Icons is checked on the View menu, the Anchor indicator appears at the 
anchor location on the page. 


To edit the anchor, select the anchored text or object, click the Anchor button on the 
Properties palette, and change its name in the Change Anchor dialog. To delete the 
anchor, click the Anchor icon and click Remove in the Change Anchor dialog. If 
you are working with a text object, you can click the anchor icon to open the 
Change Anchor dialog. 


Creating a Smart Link 


Smart links lead to a page in your site based on its relative position in the 
SiteStructure, rather than its name. These links automatically adjust when you 
change the SiteStructure. For example, if your smart link leads to the parent of the 
current page, and you move the current page to a different parent, NetObjects 
Fusion updates the link to point to the new parent. Sometimes a smart link is called 
a structural link. 


To create a smart link: 


1. In Page view, select some text or select an object to link. 


If you link to a text insertion point, the link name is inserted in the text. 
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2. On the Standard toolbar, click the Link tool. 


The Link dialog appears. 


3. Select the Smart Link type. 


4. Select the type of link you want. The links listed depend on the type of page you 
are on—normal or stacked, and on what pages are available to link to from the 
page you are on. 


✦ 
Home links to your Home page. 


✦ 
Up links to the parent of the current page. 


✦ 
Next Stacked Page links to the next page in a set of stacked pages. 


✦ 
Previous Stacked Page links to the previous page in a set of stacked pages. 


✦ 
Next Page links to the sibling to the right of this page in the SiteStructure. 


✦ 
Previous Page links to the sibling to the left of the current page in the 
SiteStructure. 


✦ 
First Child Page links to the ﬁrst child page of the current page. 


✦ 
Blank creates an empty JavaScript link on the page that you can use to assign 
an action. 


5. Click Link. 


For information about stacked pages, see Chapter 27, “Data Publishing.” 


See “Setting Link Targets” 
on page 295 


See “Adding HTML to a 
Link” on page 297 
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Creating Links 


Creating an External Link 


External links are Universal Resource Locators (URLs) that point to other pages 
and items in other sites. A valid URL can include the protocol, host name or DNS, 
path name, and sometimes a ﬁle name, such as http://www.netobjects.com/products/ 
fusion.html. Each external link becomes an asset of the site that you can update in 
Assets view. 


To create an external link: 


1. In Page view, select some text or select an object to link. 


2. On the Standard toolbar, click the Link tool. 


The Link dialog appears. 


3. Select the External Link type. 


4. Select a protocol from the New link drop-down list. 


If you’re creating a link that does not require a protocol, select (none). If you 
want to use a protocol that is not in the drop-down list, you can type it in. 


5. Enter the appropriate information in the URL entry ﬁeld and click Save, or 
select an existing link from the list. For example, you could enter a URL, a 
mailto address, or a Java command depending on the selected protocol. For 
details about email links, see “Adding an Email Link.” 


New link list with 
protocol selected 


URL entry 
field 


See “Adding HTML to a 
Link” on page 297 


Name of link in 
Assets view 


List of previously 
entered links 


See “Setting Link 
Targets” on page 295 
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6. If you’re creating a new external link, you can edit the default name for this link 
in the Name column by double-clicking in the column ﬁeld and typing. 


This name is placed in the text if you do not select text or an object to link. It 
appears in the list of links in Assets view so you can quickly identify and sort 
link destinations. It is not added to the HTML generated when your site is 
published. 


7. Click Link. 


Note: You can also create an external link as you type. If your text includes @ or ://, 
NetObjects Fusion automatically creates an external link. 


Adding an Email Link 


To add a mailto link: 


1. In Page view, select some text or select an object to link. 


If you place the insertion point in text without selecting text, the email address 
is inserted in the text as the link. 


2. On the Standard toolbar, click the Link tool. 


The Link dialog appears. 


3. Select the External Link type. 


4. Select mailto from the New link drop-down list. 


5. In the text entry field, type the email address using the format 
username@domain.com. 


6. Click Link. 


7. Preview the page. 


When you click the link, the browser’s email client displays a mail window with 
the address you entered in the recipient ﬁeld, provided the browser is conﬁgured 
to send email using the HTML mailto command. 
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Adding a Relative Link 


Relative links are important if you must link to ﬁles that are published separately. 
Relative links protect the links on your pages if your ISP moves or changes the 
server location. To create a relative link, you must know where the destination ﬁle is 
relative to the ﬁle containing the link. 


For example, suppose you publish a site using the by Site Section publishing 
option. Your company PR department wants to place HTML documents on the 
server, but publish them separately from the main Web site. The PR department has 
its own Articles directory on the server at the root of the site. There is also a News 
directory and the index page for the site at the root of the site. The structure looks 
something like this: 


index.html 
/News 
news.html 
/Articles 
PressRelease1.html 
PressRelease2.html 


The main News page is published in the News directory. You must create a relative 
link to link the news.html page to the articles in the Articles directory. 


To create a relative link: 


1. In Page view, select some text or select an object to link. 


2. On the Standard toolbar, click the Link tool. 


The Link dialog appears. 


3. Select the External Link type. 


4. Select (none) from the New link drop-down list. 


5. In the text entry field, type the relative path from the news page to the press 
release page. For example: 


../Articles/PressRelease1.html 


You cannot test this link by previewing, because it requires the exact 
conﬁguration of ﬁles that only exists on the server. However, after you publish 
the site and the PR department uploads articles into the Articles directory, the 
link will work correctly. 
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When typing the path, if you do not include periods or slashes in front of the ﬁle 
name, NetObjects Fusion attempts to ﬁnd the ﬁle in the same directory as the 
page containing the link. This is also true for the format ./ﬁlename.html. To back 
up one directory before looking for the path, use ../path/ﬁlename.html. For each 
directory you need to back up to ﬁnd the destination ﬁle, include another ../. For 
example, suppose you create a Press Releases page in a directory called PR 
within the News directory: 


index.html 
/News 
news.html 
/PR 


PRlinks.html 
/Articles 
PressRelease1.html 
PressRelease2.html 


A link from PRlinks.html to PressRelease1.html looks like this: 


../../Articles/PressRelease1.html 


Remember that some servers are case sensitive; your link must exactly match 
the directory names and ﬁle names of where you want to go. 


6. Click Link. 


Creating a File Link 


You use ﬁle links to link to a ﬁle. For example, you might create a ﬁle link so site 
visitors can download the ﬁle. When you create a ﬁle link, the ﬁle it refers to 
becomes an asset of the site and is uploaded to the server when the site is published. 


To create a ﬁle link: 


1. In Page view, select some text or select an object to link. 


If you place the insertion point within the text without selecting text, the ﬁle 
name is inserted in the text. 


2. On the Standard toolbar, click the Link tool. 


The Link dialog appears. 


3. Select the File Link type. 
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Creating Links 


The File path ﬁeld displays the path to the ﬁle and the Name column displays 
the name that appears as the link if no text or object is selected. 


4. Click Browse, select a ﬁle in the Open dialog, and click Save. 


5. If necessary, enter or edit the Name. 


This name appears as the link if no text or object is selected and also in the list 
of links in Assets view so you can quickly identify and sort link destinations. It 
is not added to the HTML generated when your site is published. 


6. Select Convert to HTML document when publishing so all site visitors can view 
the document. If your linked ﬁle remains in its original format, it can only be 
opened by applications that support that ﬁle type. This feature only works with 
.doc, .mcw, .xls, and .rtf ﬁles. 


7. Click Link. 


Note: The way the linked ﬁle opens for site visitors depends on the conﬁguration of their 
browser and Web server. Test the link in the appropriate browsers before publishing the 
site. 


Location 
of ﬁle 


See “Adding HTML to a 
Link” on page 297 


List of ﬁle links 
previously entered 


Converts linked ﬁle 
to HTML 


See “Setting Link 
Targets” on page 295 
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Setting Link Targets 


As explained in “Understanding Frames” on page 136, when a site visitor clicks a 
link placed within a frame, the browser has to know where to display the results. 
The frame that displays the retrieved content is the target of the link; when you 
specify which frame is to display the results of a link, you are targeting that frame. 
NetObjects Fusion includes four default targets. Choose: 


✦ 
_blank to load the speciﬁed link into a new browser window. 


✦ 
_self to replace the frame where the link resides with the document of that link. 
This is similar to how links behave on sites with no frames. 


✦ 
_parent to load the designated content into the current window’s parent. If the 
current frame has no parent the content is loaded into the same frame as the 
element that refers to this target. 


✦ 
_top to load the designated content into the full, original window. This cancels 
all other frames. If the current frame has no parent the content is loaded into the 
same frame as the element that refers to this target. 


To display the designated content in a new named window, you can create a new 
link target. 


To set a link target: 


1. In Page view, select the object or text that you want to link. 


2. Click the Link tool on the Standard toolbar. 


The Link dialog appears. 


3. Select the type of link you are targeting: Internal Link, Smart Link, External 
Link, or File Link and set up the link. See “Creating Links” on page 284. 


4. In the Target area, click Existing and from the drop-down list choose the target 
frame in which you want to display the linked information. 
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To display the designated content in a new named window, click New and type a 
name for the window. If a window with that name already exists, the content is 
displayed in the existing window. 


You may not need to assign a target. NetObjects Fusion automatically targets 
most internal links for you. 


5. Click Link to close the dialog and create the link. 


6. Preview the page to test your targeted links. 


Following Links 


Link icon 


If Object Icons is checked on the View menu, NetObjects Fusion displays the Link 
icon wherever you create a link to an object. If you place the pointer over the icon, 
the link is displayed in the status bar at the bottom of the NetObjects Fusion 
window. 


Text links are underlined and appear in the default font and color for links. 


In Page view, you can follow a link you created to its target page or anchor: 


✦ Right-click a linked object and select Follow Link from the shortcut menu or 
select the object and from the Go menu, choose Follow Link. 


✦ To follow a text link, select the linked text, right-click, and select Follow Link 
from the shortcut menu. 


Finding a Link 


As the number of pages in your site grows, the number of links will probably 
increase as well. NetObjects Fusion makes it easy for you to ﬁnd a link. 


1. Open the Link dialog. 


2. Click the Find button. 


The Find link type Link dialog appears. 
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3. Select criteria for the search, enter the text you want to search for, and click 
Find. 


NetObjects Fusion ﬁnds the ﬁrst link that satisﬁes your criteria. 


4. To ﬁnd the next link that matches the criteria, click Find Again. 


Editing or Removing a Link 


To edit a link, select the linked text or object, click the Link button on the Properties 
palette or Standard toolbar, then change the link in the Link dialog. If an external 
link is used in multiple places in your site, you can update all instances by editing 
the link in Assets view. 


To remove a link, select it, click Link on the Properties palette or Standard toolbar, 
and click Unlink in the Link dialog. You cannot remove a link in Assets view, but 
you can verify all instances of a link. If you unlink every instance of a link, it is 
removed automatically. 


You can insert HTML and JavaScript before, inside, and after links. See “Adding 
HTML to a Link.” You can also use a link to trigger an action using the Blank link. 
See “Adding an Action to Linked Text” on page 358. 


Adding HTML to a Link 


You can add your own HTML or JavaScript to a link to extend its capabilities. For 
example, you might want to add HTML that directs the browser to open the link in 
a new window, or JavaScript that displays a dialog. The steps below demonstrate 
how to add HTML that directs the browser to open the link in a new window. For 
more information, see “Accessing an Object’s HTML” on page 461. 


1. In Page view, select some text or an object to link. 


2. On the Standard toolbar, click the Link tool. 


The Link dialog appears. 


3. Select a link type. 


4. Click the HTML button in the Link dialog. If the HTML button is not available. 
the object does not allow additional HTML. 


The Link HTML dialog appears. 
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Working with Imagemaps 


5. Click the Inside Link tab to indicate where you want to add HTML or 
JavaScript. 


6. If you want the link to open the page in a new window, type 
target=NewWindow. 


As you type, the top part of the dialog displays your code in blue type as it will 
appear in the HTML NetObjects Fusion generates. 


7. Click OK in the Link HTML dialog. 


8. Click Link in the Link dialog. 


When you preview or publish the site, the link opens a new browser window. 


Working with Imagemaps 


An imagemap can contain several links in a single picture. You create an imagemap 
by drawing hotspots on a picture. You can link as many hotspots as you like in a 
single image, but the hotspots cannot overlap or extend beyond the edge of the 
picture. Because the imagemaps you create with the following procedure do not 
require a CGI script running on the server, they are called client-side imagemaps. 
Server-side imagemaps require setup on a Web server to run properly. 


To create a single link on a picture, you do not need to use an imagemap unless you 
only want to link part of the image. Imagemaps are only necessary to create 
multiple links on one object. 
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Creating an Imagemap 


Hotspot tool 


1. In Page view, click the Hotspot tool on the Standard toolbar, and select the 
appropriate tool from the ﬂyout to create a rectangular, circular, or polygon 
hotspot. 


2. Draw a hotspot on an image. 


If you are using the Polygon Hotspot tool, you must click to establish each 
vertex of the polygon, then double-click to complete the hotspot shape. 


The Link dialog appears. 


3. In the Link dialog, select a link type—internal, smart, external, or ﬁle. 


See “Creating Links” on page 284. 


4. Select a destination for the link and click the Link button. 


Once a picture has hotspots, you can move it anywhere on the page and even copy 
and paste it elsewhere in the site without affecting the imagemap. 


Editing an Imagemap 


To edit an existing hotspot, click the hotspot. The General tab of the Hotspot 
Properties palette appears. 


✦ To edit the link, click Link on the Properties palette or the Standard toolbar. The 
Link dialog appears, displaying the link information. Change the link 
destination or click Unlink to remove the link. 


✦ To add HTML to a hotspot, click HTML. See “Accessing an Object’s HTML” 
on page 461. 


✦ To assign an action to a hotspot, click its Actions tab on the Properties palette 
and follow the procedure described in “Adding Actions to Objects and Pages” 
on page 353. 


✦ To resize a hotspot, select it and drag its handles. 


✦ To create an alt tag for the hotspot, type in the AltTag ﬁeld. The alt tag appears 
when the browser does not display the image. 


✦ To create multiple hotspots on an imagemap, create one hotspot, copy it, and 
paste it on the image. The pasted hotspot appears in the upper-left corner of the 
imagemap. Move the hotspot to the appropriate location and edit the link. 
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Creating E-Commerce 
Catalogs 
20 


Using the E-commerce Catalog tool, you can easily create an online store and offer 
site visitors an enjoyable shopping experience. You add products, images and 
descriptions, and choose from an assortment of display options. Your store looks 
great on the Web and site visitors can easily ﬁnd what they are looking for. 


Add a store engine to process online transactions and further manage products. 
Choose from several providers that offer cost-effective solutions as a means to 
doing business on the web. 


Note: Your store engine may include components that must be published for your catalog to 
perform correctly on the web. See “Publishing Components” on page 504 or refer to 
your store engine’s user manual for details. 


This chapter describes: 


✦ Adding catalogs 


✦ Working with products 


✦ Adding product attributes, images and descriptions 


✦ Formatting list pages 


✦ Formatting detail pages 


✦ Conﬁguring store engines 


✦ Controlling download time 


✦ Saving Proﬁles 
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About Catalogs 


About Catalogs 


Each catalog you add to your site includes two types of pages—a list page and 
detail pages. 


✦ The list page displays a short summary of each product in the catalog displayed 
in a format that you select. You can choose to add a thumbnail image of your 
products so that site visitors can click to see the full detail page. 
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✦ Each detail page can display a large image of the product. You can also display 
product attributes such as name, product number, price and weight. 


When you add a catalog object to the list page, NetObjects Fusion automatically 
adds the Details page for you. On the Site Navigation palette, the list page is 
displayed as a single icon that contains multiple pages. 
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Adding a Catalog 


Adding a Catalog 


You can create a new catalog or add an existing catalog to your site. You can insert 
an existing catalog or add catalogs that you removed from the site. See “Removing 
a Catalog” on page 325. 


You add the catalog object to the page where you want to display the list of 
products. You can add a new page or use an existing page. 


Creating a New Catalog 


1. In Page view, display the page where you want to place the catalog object. 


This is the page where the product list appears. 


catalog tool 


2. Choose the Catalog tool from the Advanced toolbar and click in the upper left 
corner of the Layout area. 


Start in the upper left corner to allow as much space as possible for the 
thumbnail images. 


The Add E-Commerce Catalog dialog appears. 


Current catalogs and catalogs that were added to the site and then removed are 
listed in the Insert an existing E-Commerce Catalog section at the bottom of the 
dialog. If no other catalogs were created, you do not see this list. 


3. Type a name for the new catalog. 


Current catalogs and catalogs that were 
added to the site and then removed are listed 
in the Insert an existing E-Commerce 
Catalogsection as shown at the right. If no 
other catalogs were created, you see the 
dialog above. 
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NetObjects Fusion uses the name you enter as the name of the detail page. This 
name appears in the banner at the top of each product detail page. You can 
rename the page in Site view just as you rename any other page, or you can 
display the product title in the banner or edit the text on the Banner Properties 
palette. See “Changing the Banner Text” on page 279. 


You cannot use the name of an existing catalog. 


4. Choose a Store. 


If you intend to offer online credit card processing, you must have a store. Click 
the Add Store option from the drop-down list to select a store engine. 
“Conﬁguring the Store” on page 319. 


Note: NetObjects Fusion allows you to add a catalog without a store. You can save 
your settings and add a store engine at any time. 


5. Choose a Proﬁle. 


NetObjects Fusion allows you to reuse settings each time you add a new 
catalog. You may choose a proﬁle containing all information associated with an 
existing catalog, or choose Default to create a new proﬁle. “Saving a Catalog 
Proﬁle” on page 324. 


Current proﬁles and proﬁles of catalogs that were added to the site and then 
removed are included in the Create a New Catalog section at the top of the 
dialog. If no other proﬁles were created, you can only choose Default. 


6. Click OK. 


Inserting an Existing Catalog 


1. Display the designated list page in Page view. 


catalog tool 


2. Choose the catalog tool from the Advanced toolbar and click in the upper left 
corner of the Layout area. 


Start in the upper left corner to allow as much space as possible for the 
thumbnail images. 


The Add catalog dialog appears. 


Available catalogs are listed in the Insert an existing E-Commerce Catalog 
section at the bottom of the dialog. 
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Working with Products 


3. Select Insert an Existing Catalog. 


4. Select the catalog you want to insert and click OK. 


Working with Products 


You begin building your catalog by adding products. 


Adding Products 


You add products on the Products tab of the E-Commerce Catalog Properties 
Editor. 


1. Open the E-Commerce Catalog Properties Editor. You can: 


✦ Add a catalog by following the steps in “Adding a Catalog” on page 304. 


✦ Double-click a product on a list page or a detail page. 


The E-Commerce Catalog Properties Editor appears, displaying the Products 
tab. 
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2. Enter in product information by navigating to the sub-tabs located on the 
Products tab. 


✦ Attributes. Add detailed information that will identify your product, such as 
a name or part number. To assign speciﬁc characteristics such as color and 
size, see “Adding Options” on page 307. 


Note: The attributes listed are determined by the store engine being used. Refer to 
your store’s user manual for further information about the attributes listed. 


✦ Description. Provide your customers a brief and extended product 
description. The descriptions can be shown on the List page and detail pages 
of your catalog. 


Also, you can add product comments and keywords related to a speciﬁc 
product. This information can only be viewed in the E-commerce Catalog 
Properties Editor, 


✦ Detail Image. Upload an image associated with the selected product. Use 
the options on the Detail Image tab to conﬁgure the image output settings. 
For more information about image output settings, “Controlling Download 
Time” on page 320. 


✦ Thumbnail Image. Display the product detail image as a thumbnail that can 
also link to the product detail page. For information about image output 
settings, see “Controlling Download Time” on page 320. 


✦ Related Products. Related products can be used to promote similar products 
in your catalog. You can display related items that site visitors may be 
unaware of on the detail page of a product. 


Adding Options 


You can create product attributes without having to add separate product records. 
For example, you can include variations, such as size or color, to one item without 
having to create additional products. 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the Products tab. 


4. In the name column, select a product you want to add options to. 
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Working with Products 


5. Click on Add Options. 


The Add Group dialog will appear: 


6. Enter a Group Name that will identify this group of options. 


The Group Name will appear only in the E-Commerce Catalog Properties 
Editor. 


7. Enter a label. If no label is entered, the label name will default to the Group 
Name. 


The label will appear beside the options on the List page and detail page of your 
site. 


8. Click OK. The Edit Product Options dialog will appear. 


a. Click New Option to add a value, such as size or color. 


b. Click Add Another to add more values. 


c. 
Click OK to close the Edit Product Options dialog 


d. Click OK to close the Add Options dialog. 
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e. The option group will now appear in the Options ﬁeld. 


➲ To edit a group and its values, highlight the group in the Options ﬁeld and click 
Edit Option. See “Adding Options” on page 307 


Arranging Products 


Products are listed in the Name column on the List Page tab of the E-Commerce 
Catalog Properties Editor. The products appear in the order you add them to the 
catalog, which is also the order they appear on the detail pages. This may not be the 
order you want to display the products, so you must rearrange them. 


You can rearrange the products on the List Page tab of the E-Commerce Catalog 
Properties Editor. 


Moving Products on the List Page Tab 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the List Page tab. 


4. In the Name column: 


✦ Select a product and drag it into a new position in the list. An indicator 
displays as you move the product. 


✦ Select a product and click Move Up or Move Down to shift it into the proper 
position. 


Sorting Products 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the List Page tab. 
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Working with Products 


4. Click Sort. 


5. Select the product item and choose Ascending or Descending. 


6. Click OK. 


Resizing Product Images 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Click an image. The Properties Palette appears. 


3. Resize the image. 


You can change the image size by dragging the slider on the properties palette, 
by entering the width directly in the Properties Palette, or by dragging the 
image. 
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✦ To change the image size by dragging, select the image and drag the small 
white box until the image is the size you want. When you release the mouse 
button, the image is resized. If you are on the List page, all images are 
resized. 


✦ To change the image size by dragging the slider on the Properties Palette, 
drag the slider to the right to increase the image size, or to the left to 
decrease the image size. A dotted line rectangle increases or decreases 
proportionally as you drag and the size of the image is displayed in a Screen 
Tip. 


When the image is the size you want, release the mouse button. 


✦ To change the image size by entering the width directly in the Properties 
Palette, type a number in the Width ﬁeld. 


4. Apply the change. 


✧ If you are on the List page, click Apply to All to resize all thumbnail images. 


✧ If you are on a detail page, click Apply to resize only the current photo or 
Apply to All to resize all photos in the catalog. 


Resizing Product Boundaries 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Click on the catalog object. The Properties Palette appears. 
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Working with Products 


3. Resize the product boundaries. 


You can change the boundary size by dragging the slider on the Properties 
palette or by entering the width directly in the Properties Palette 


✦ To change the boundary size by dragging the slider on the Properties Palette, 
drag the slider to the right to increase the space or width between products, 
or to the left to decrease the space or width. 


✦ To change the boundary size by entering the space or width directly in the 
Properties Palette, type a number in the space or width ﬁeld. 


4. Apply the change. 


✧ If you are on the List page, click Apply to All to resize all thumbnail images. 


✧ If you are on a detail page, click Apply to resize only the current photo or 
Apply to All to resize all photos in the catalog. 


Removing Products 


You can remove products from the catalog on the Products tab of the E-Commerce 
catalog properties editor. 


1. In Page view, display the List page or Detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the Products tab. 
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4. In the Product Name column, select a product and click Remove, 


Duplicating Products 


You can easily duplicate products that share similar attributes. 


1. In Page view, display the List page or Detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the Products tab. 


4. In the Product Name column, select a product and click Duplicate. 


5. You will see the duplicate product listed with (copy) in the name, 


Filtering Products 


You can ﬁlter your product list by searching for products with similar attributes. 


1. In Page view, display the List page or Detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the Products tab. 


4. Click on Filter. 


You will see the Product Filter dialog appear. 
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Formatting the List Page 


5. Choose an attribute to search for. 


6. Choose a parameter to narrow your search and type in a value. 


7. To further narrow your search, place a mark in the check box and add additional 
parameters. 


8. Click OK. 


To remove the ﬁlter so that all products are displayed, click Show All. 


Formatting the List Page 


On the List page, you determine how your site visitors will view your products. You 
can: 


✦ Choose a layout with text and images displayed in rows and columns. 


✦ Determine which attributes will be displayed for selected products. 


✦ Choose purchase button options. 


Selecting a Layout for Your Catalog 


You can select a layout that showcases your products in an attractive way. Text can 
be placed above, below or beside images in columns and rows. 


1. In Page view, display the List page or a detail page of the product you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the List Page tab. 


4. Click the Layout tab under the product list. 
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5. Select a layout. 


6. Select the number of columns to be used. 


You can place up to 3 columns on a page. 


7. Select “Thumbnail image links to Detail Page” to automatically open the 
product detail page when a user clicks on the thumbnail image. 


8. Continue formatting or click Done to close the editor. 


NOF7.5UG~1.BOO Page 315 Thursday, January 21, 1904 11:14 PM 


316 


Formatting the List Page 


Displaying Products 


You choose which product items you want displayed on the List page. Labels can 
be placed by each item so that site visitors are informed of what each ﬁeld 
represents. 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the List Page tab. 


Click the Display Items tab under the products list. 


4. In the Product Item ﬁeld, highlight an item you want to display with the product 
listing. To display all attributes, click “Add All”. 


5. Highlight the item in the Product Items to Display ﬁeld and click Format to: 


✦ Link the item label to the Detail page and format the text 


✦ Edit the item label and format the text 


✦ Remove the item label so it is not displayed on the List page. 


6. To change the order in which the items are displayed, highlight the item in the 
Product Items to Display ﬁeld, then click Move Up or Move Down. 


To remove an item from the Product Items to Display ﬁeld, highlight the item 
and click Remove. To remove all items, click Remove All. 


7. Continue formatting or click Done to close the editor. 
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If you have conﬁgured a store engine, you can choose to display text or graphical 
links that will place products in a shopping cart. 


Note: The Purchase Options tab will only be available if you have conﬁgured a store 
engine. If you are using the catalog without a store engine, you will not have 
the option to add purchase items. 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the List Page tab. 


4. Click on the Purchase Options tab: 


✦ Select “Display Buy” to provide site visitors a link that will take them to 
your store and begin the purchase process. 


✧ To display the link as text, choose Text Link and enter in the text you 
want to link 


✧ To display the link as an image, choose Button Image and browse to the 
folder containing the image you want to add. 


✦ Select “Display Add to Cart” to provide site visitors a link that will allow 
them to add products to their cart while continuing to shop. 


✧ To display the link as text, choose Text Link and enter in the text you 
want to link 


✧ To display the link as an image, choose Button Image and browse to the 
folder containing the image you want to add. 


5. Continue formatting or click Done to close the editor. 
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Formatting the List Page 


Formatting the Detail Page 


NetObjects Fusion makes it easy for you to present the catalog in a professional and 
pleasing way. You can choose a layout displaying the product image, include 
product item labels and descriptive text, and add images that link to your store. The 
format options you select apply to all detail pages. 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the Detail Page tab. 


4. In the Detail Page Layout section of the tab, select a layout. 


In the samples, the boxes with an X represent the product and the lines are the 
text. 


5. In the Detail Page Display Items section, highlight the product items you would 
like displayed on the detail page and click Add. 


To display all product items, click Add All. 


6. Highlight the item in the Product Items to Display ﬁeld and click Format to: 


✦ Edit the item label and format the text. 
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✦ Remove the item label. 


7. In the Detail Page Purchase Options section: 


✦ Select “Display Buy” to provide site visitors a link that will take them to 
your store and begin the purchase process. 


✧ To display the link as text, choose Text Link and enter in the text you 
want to link 


✧ To display the link as an image, choose Button Image and browse to the 
folder containing the image you want to add. 


✦ Select “Display Add to Cart” to provide site visitors a link that will allow 
them to add products to their cart while continuing to shop. 


✧ To display the link as text, choose Text Link and enter in the text you 
want to link 


✧ To display the link as an image, choose Button Image and browse to the 
folder containing the image you want to add. 


Note: The Purchase Options tab will only be available if you have conﬁgured a store 
engine. If you are using the catalog without a store engine, you will not have 
the option to add purchase items. 


8. Continue formatting or click Done to close the editor. 


Conﬁguring the Store 


1. In Page view, display the list page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


Display the Store tab. 
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Controlling Download Time 


The current store engine is listed in bold. 


3. Click Change Engine to use an existing store engine or to sign up for a new 
store engine account. 


4. Conﬁgure and administer your account under Store Engine Settings. 


Note: The Store Engine Settings will depend on the account being used. Refer to 
your store engine’s user manual for complete information regarding these 
settings. 


5. Continue formatting or click Done to close the editor. 


Controlling Download Time 


When you conﬁgure a catalog, be considerate of site visitors by minimizing the 
time it takes for the images to download. Image quality and size both affect 
download time. You can use the output settings in the E-Commerce Catalog 
Properties Editor and the ﬁle size information on the properties palette to keep track 
of and adjust download time while maintaining image quality. 


To control the image format: 


1. In Page view, display the list page or a detail page of the catalog you want to 
work with. 
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2. Open the E-Commerce Catalog Properties Editor. 


3. Display the Products tab. 


The output settings for detail images and thumbnail images are separate. 


4. Click the Thumbnail Image tab or Detail Image tab at the bottom of the 
Products tab. 


On these tabs you set the quality of the thumbnail and detail images for the 
selected product. As you make changes, NetObjects Fusion displays the 
approximate download time for the ﬁle. 


You may choose to save and apply previously deﬁned settings. See “Saving 
Output Settings” on page 322 


5. Select the File type. 


Most photos will be JPEG format. 


6. Set the Quality and Percent. 


These ﬁelds both affect image quality. 100% is the highest quality, 0% the 
lowest quality. 


a. Set the Quality ﬁeld ﬁrst. Each setting corresponds to a range of percents. 
Low corresponds to 0-39%, Medium to 40-75%, High to 76-99%, and 
Maximum to 100%. 


b. Use the Percent ﬁeld to ﬁne-tune the quality setting. 


As you adjust the settings, the image in the Preview ﬁeld changes. If the 
Preview image is scaled down, you can close the editor and check image quality 
in Page Design view. 
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Controlling Download Time 


7. Select a download speed. 


The most common download time is 56.6. 


8. To apply these settings to all the product images, click Apply to All. 


This affects all thumbnail images or all detail images, depending on the selected 
tab. 


9. Set image rotation. This setting affects only the selected image. 


To control the image sizes: 


1. In Page view, display the List page or a detail page of the catalog you want to 
work with. 


2. Select a thumbnail or detail image. 


Notice the image size on the properties palette. 


If you selected a thumbnail image, you can choose to see the size of the current 
image or of all thumbnail images. 


3. Resize the image. See “Resizing Product Images” on page 310. 


As you resize, the Properties palette shows the effect on the ﬁle size. 


Saving Output Settings 


To save your output settings: 


1. In Page view, display the list page or a detail page of the catalog you want to 
work with. 


2. Open the E-Commerce Catalog Properties Editor. 


3. Display the Products tab. 


The output settings for the thumbnail images and the detail images are separate. 


4. Click the thumbnail Image tab or Detail Image tab at the bottom of the Products 
tab. 


5. Click on the Output Settings menu and choose Save Setting. 
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Note: Note that a change must be made to the default settings in order to create a 
new setting. 


6. Type a name for the new output setting. 


7. Edit File Type, Quality and Percent, if necessary. 


8. Click OK. 


Removing Output Settings 


1. From the E-Commerce Catalog Properties editor, click the Thumbnail Image 
tab or Detail Image tab at the bottom of the Products tab. 


2. Click on the output settings menu and choose Save Setting. 


3. Highlight the setting you want to delete from the Existing Output Settings list. 


4. Click Remove. 
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Setting Up Navigation for Site Visitors 


Setting Up Navigation for Site Visitors 


NetObjects Fusion automatically inserts navigation buttons with smart links on the 
detail pages. Site visitors can use these buttons to go to the next and previous detail 
pages and to return to the thumbnail page. 


The images used for these buttons—SPNavLeft.gif, SPNavRight.gif, and SPNavUp.gif—are 
in the NetObjects Fusion 7.5\NetObjects System folder. 


If you do not want to use these buttons, you can delete them and set up your own 
smart links between pages. See “Adding Navigation Buttons to Stacked Pages” on 
page 444. 


Saving a Catalog Proﬁle 


NetObjects Fusion allows you to save the settings associated with your catalog so it 
can be the basis for future catalogs. 


When you save a proﬁle, you save the 


✦ List page layout 


✦ Detail page layout 


✦ Displayed items 


✦ Purchase options. 


To save a proﬁle: 


1. In Page view, display the list page or detail page of the catalog you want to work 
with. 


2. Open the E-Commerce Catalog Properties Editor. 


Click Save Proﬁle. 


Note that the output settings displayed at the time you save your proﬁle will be 
stored in your proﬁle. These output settings will apply to all images created in a 
new catalog using this proﬁle. 
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3. Type a name for the new proﬁle. 


If you choose the name of an existing proﬁle, it will replace the existing proﬁle. 


4. Click OK. 


Note: Not all settings are saved in your proﬁle. Product records, options and images are not 
included in a saved proﬁle. 


Removing a Catalog 


1. In Page view, display the list page of the catalog you want to remove. 


2. Select the catalog object and delete it. 


3. Go to Site view. 


4. Delete the detail page associated with the catalog. 


When you add a new catalog, the name of the catalog you just removed still appears 
in the Insert an existing catalog list in the Add catalog dialog. 


To delete a catalog completely from your site: 


1. Go to Assets view. 


2. Select the Data Objects tab. 


3. Select the catalog you want to delete. 


4. Press Delete. 


You can delete a catalog only if you have ﬁrst removed it from your site as 
described above. 
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Removing a Catalog 
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Placing Media 
21 


Media such as sound and video give a site impact. The tools in NetObjects Fusion 
make it easy to add a variety of media ﬁles to your pages. To ﬁnd sample media 
ﬁles, visit Online view. 


This chapter tells how to add: 


✦ Flash ﬁles 


✦ Shockwave ﬁles 


✦ QuickTime movies 


✦ Windows Media Player ﬁles 


✦ Sound ﬁles 


✦ Plugins 
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Inserting a Flash File 


Inserting a Flash File 


With Flash from Macromedia, you can create rich Internet content and applications. 
NetObjects Fusion supports Flash (.swf) and Splash (.spl) ﬁles. 


To insert a Flash ﬁle: 


Flash tool 


1. In Page view, select the Flash tool from the Dynamic Media ﬂyout on the 
Advanced toolbar. 


2. Draw a box to indicate the Flash ﬁle’s location on the page. 


The Open dialog appears. 


3. Select a Flash ﬁle from your hard disk or LAN, or select a Flash ﬁle already in 
use in the site from the Plug-in Assets tab. 


For information about using assets, see Chapter 29, “Managing Assets.” 


4. Click Open. 


The Flash placeholder appears on your page, and the Flash Properties palette 
appears. The name of the selected ﬁle appears in the File ﬁeld on the General 
tab. 


5. To provide text for the browser to display if it cannot play the Flash ﬁle, enter a 
description in the AltTag ﬁeld. See “Adding and Modifying Alt Tags” on 
page 84. 


6. To play the latest Flash movies, you sometimes must change the version. You 
can ﬁnd complete information at www.macromedia.com/support/ﬂash/ts/ 
documents/test_version.htm. 
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7. Click the HTML button to insert HTML tags and scripts. See Chapter 28, 
“Working with HTML Directly.” 


8. Click the Controls tab. 


9. To control the display when using anti-aliasing, select a Quality option. 


✦ 
AutoLow sets the default to normal quality. The host computer uses high 
quality if it has the capacity. 


✦ 
AutoHigh starts the movie in high quality. The host computer uses low 
quality if it cannot display the movie in high quality. 


✦ 
High anti-aliases the movie on any computer. 


✦ 
Low uses a normal quality so the movie displays quickly. 


10. To determine how the movie ﬁts in the image frame, select a Scale option. 


✦ 
ShowAll displays the movie within the frame but maintains the image 
proportions. 


✦ 
NoBorder displays the movie so it ﬁlls the frame but maintains the ratio of 
the animation. Some edges of the animation might be trimmed. 


✦ 
ExactFit displays the movie exactly within the frame. 


11. To specify the movie’s alignment within the frame, select an Alignment option, 
such as Left, Bottom, or Top Right. 


12. To play the movie automatically when the site visitor opens the page, select 
Auto Start. 


13. To replay the movie when it ends, select Loop. 
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Inserting a Shockwave File 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Inserting a Shockwave File 


With Shockwave from Macromedia, you can create multimedia, graphics, and 
audio that downloads quickly. NetObjects Fusion supports these Shockwave ﬁle 
formats: 


✦ Shockwave for Director 4.0 and 5.0 (.dcr) 


✦ Director (.dir) 5.0 or greater 


✦ Protected Director (.dxr) 


To view these ﬁles, site visitors must install the Shockwave plugin appropriate for 
their browser and platform. These plugins are available from the Macromedia Web 
site at www.macromedia.com. 


You cannot directly add a Shockwave audio (.swa) ﬁle to a page. You must embed it 
in a Director movie by passing it as a parameter to the movie, and place the movie 
on your page. Then in Assets view, add the Shockwave audio ﬁle as a ﬁle asset. Any 
Shockwave ﬁles you place on a page appear inline on the page itself. 


To insert a Shockwave ﬁle: 


Shockwave tool 


1. In Page view, select the Shockwave tool from the Dynamic Media ﬂyout on the 
Advanced toolbar. 


2. Draw a box to indicate the Shockwave Director ﬁle’s location on the page. 


The Open dialog appears. 


3. Select a Shockwave Director ﬁle from your hard disk or LAN, or select a 
Shockwave Director ﬁle already in use in the site from the Plug-in Assets tab. 


For information about using assets, see Chapter 29, “Managing Assets.” 


4. Click Open. 


The Macromedia Shockwave placeholder appears on your page, and the 
Shockwave Director Properties palette appears. 


For most ﬁle formats, NetObjects Fusion sizes the Shockwave placeholder to ﬁt 
the stage, which is the space where the animation appears. If automatic sizing 
does not occur, you must size the object manually. Check that you have the right 
browser plugin or ActiveX control installed. Before NetObjects Fusion can 
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automatically set height and width parameters for Macromedia Director movies, 
you must install the Macromedia Director ActiveX control (version 6.0.1 or 
later) or the Macromedia Director Netscape plugin (version 6.0.1 or later). To 
obtain the ActiveX control, create a site with NetObjects Fusion that contains a 
Director movie, then preview the site with Microsoft Internet Explorer. The 
ActiveX control is automatically downloaded and installed. If you don’t have 
Internet Explorer, you can download the current Macromedia Director plugin at 
www.macromedia.com/shockwave/download. 


The name of the selected ﬁle appears in the File ﬁeld on the General tab of the 
Properties palette. 


5. To provide text for the browser to display if it cannot play the Shockwave ﬁle, 
enter a description in the AltTag ﬁeld. See “Adding and Modifying Alt Tags” on 
page 84. 


6. Click the HTML button to insert HTML tags and scripts. See Chapter 28, 
“Working with HTML Directly.” 


7. Click the Controls tab. 
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Inserting a QuickTime Movie 


8. Click the option you want, enter the parameter, and click the check mark. 


If you’ve worked with Director ﬁles, you should be familiar with these options. For 
information, see your Shockwave or Director user guide. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Inserting a QuickTime Movie 


QuickTime, developed by Apple Computer, is a multimedia software architecture 
used to create and deliver graphics, sound, video, text, music, and 3D media. You 
can use the QuickTime tool to place QuickTime movies. 


To display QuickTime movies, site visitors must install the QuickTime plugin 
appropriate to their browser and platform. For more information on QuickTime, 
visit Apple Computer’s site at www.apple.com/quicktime/. 


To insert a QuickTime movie: 


QuickTime tool 


1. In Page view, select the QuickTime tool from the Digital Video flyout on the 
Advanced toolbar. 


2. Draw a box to indicate the location of the QuickTime movie. 


The Open dialog appears. 


3. Select a QuickTime ﬁle from your hard disk or LAN, or select a QuickTime ﬁle 
that was already used in the site on the Video Assets tab. 


For information, see Chapter 29, “Managing Assets.” 
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QuickTime media has a .mov or .qt extension. 


4. Click Open. 


The QuickTime placeholder and the QuickTime Properties palette appear. 
Resize the QuickTime placeholder if necessary. 


The name of the ﬁle you selected appears in the File ﬁeld on the General tab. To 
select a different movie ﬁle, click the Browse button. 


5. To provide text for the browser to display when it cannot play a movie, enter a 
description in the AltTag ﬁeld. 


6. In the Display section, select: 


✦ 
Play inline to position the movie in the browser window in the same location 
as the placeholder. 


✦ 
Launch from picture to use a picture to represent the movie on the page and 
play it in a new browser window when the site visitor clicks the picture. You 
can use the placeholder icon or click Browse and select a different image 
ﬁle. 


7. Click the HTML button to insert HTML tags and scripts. See Chapter 28, 
“Working with HTML Directly.” 


NOF7.5UG~1.BOO Page 333 Thursday, January 21, 1904 11:14 PM 


334 


Inserting a QuickTime Movie 


8. On the Controls tab, set the sound volume for the movie. You can enter a 
number from 0 to 256. 


9. In the Display options section, select: 


✦ 
Hide all if you don’t want to show the movie but want to use it only as 
background sound. This option does not work if you choose Launch from 
picture on the General tab. 


✦ 
Controller to display a control bar that site visitors can use to start or stop the 
movie. This option is not available when Hide all is selected and it does not 
work if you choose Launch from picture on the General tab. 


✦ 
Auto start to automatically start playing the movie when the page loads. 


✦ 
Loop to replay the movie when it comes to the end. To replay the movie from 
the end to the beginning, select Back and forth. 


10. To store the movie in the cache on the site visitor’s system, select Keep movie in 
user’s cache. If the visitor leaves the page and comes back, the movie doesn’t 
have to be downloaded again because it is already in the system cache. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 
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Inserting a Windows Media Player File 


You can add video, such as an animation or a movie, to a site. To view these ﬁles, 
site visitors must install the appropriate plugin for their browser and platform. 


The latest browsers often have video players built in. For example, Microsoft 
Internet Explorer uses Windows Media Player. To ensure that site visitors can view 
your video, provide a link to a site from which they can download the appropriate 
plugin. 


NetObjects Fusion supports these video ﬁle formats: 


✦ Windows Media (.wm, .wmv, .asf, .asx, .avi, .wax, .wma) 


✦ MPEG (.mpg, .mpeg, .m1v, .mp2, .mpa, .mpe, .mpv2, .m3u, .mp2v) 


To insert a Windows Media Player file: 


Windows Media 
Player tool 


1. In Page view, select the Windows Media Player tool from the Digital Video 
flyout on the Advanced toolbar. 


2. Draw a box to indicate where you want to position the video. 


The Open dialog appears. 


3. Select a video ﬁle from your hard disk or LAN or select a video ﬁle already 
used in the site from the Video Assets tab. 


For information about using assets, see Chapter 29, “Managing Assets.” 


4. Click Open. 
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Inserting a Sound File 


The Windows Media placeholder appears on the page, and the Windows Media 
Player Properties palette appears. The selected ﬁle name appears in the File 
ﬁeld on the General tab. 


5. To provide text that the browser displays if it cannot display the video, enter the 
text in the AltTag ﬁeld. 


6. In the Display section, select: 


✦ 
Inline to display a control that site visitors can use to play the video. 


✦ 
Icon to select one of the three images to represent the video. The video plays 
in a viewer or on a new blank page. 


✦ 
Picture to use another image ﬁle to represent the video. Click Browse and 
choose an image ﬁle. The video plays in a viewer or on a new blank page. 


7. Click the HTML button to insert HTML tags and scripts. See Chapter 28, 
“Working with HTML Directly.” 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Inserting a Sound File 


Sounds are either digital or synthesized audio ﬁles that a browser with a built-in 
player or helper application can play. Visitors can also download helper 
applications from sound technology developers and install them in their browsers. 
To play sounds, a system must have a sound card and speakers. 


NetObjects Fusion supports the following popular audio ﬁle formats: 
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✦ Windows Wave (.wav) format sound ﬁles that play on Windows and the Mac 
OS. For the Mac OS, site visitors must have Netscape 3.x or later. 


✦ Audio Interchange File format (.aif) with browser plugins can play on Windows 
95, 98, NT, 2000, and ME, and the Mac OS. 


✦ Musical Instrument Digital Interface (.midi, .mid) can play on almost all types of 
operating systems. 


✦ Sun’s .au format is used in Java applets and can play on UNIX based operating 
systems. 


✦ RealAudio (.ra, .ram, .rm) can play streaming audio on all systems, requires 
RealAudio Web server-resident software, and sometimes includes video. Site 
visitors must install the RealAudio player browser plugin. 


✦ Rich Music Format (.rmf) is a sound ﬁle format that enhances the use of music 
and sound in interactive environments, such as the Web. 


You can also add any of these formats as a background sound that plays when a 
visitor views your page. See “Setting Layout and Layout Region Background 
Properties” on page 114. 


Because an audio ﬁle has no visual object, NetObjects Fusion represents the audio 
ﬁle with a graphic, usually an icon or an inline player control bar that the browser 
recognizes. When a site visitor clicks the icon or the play button on the inline player 
control bar, the browser plays the sound ﬁle or opens a helper application to play it. 


To insert a sound ﬁle: 


Sound tool 


1. In Page view, select the Sound tool from the Plug-ins flyout on the Advanced 
toolbar. 


2. Click on the page to indicate the location of the sound ﬁle. 


The Open dialog appears. 


3. Select a sound ﬁle from your hard disk or LAN, or select a sound ﬁle already 
used in the site from the Audio Assets tab. 


For information about using assets, see Chapter 29, “Managing Assets.” 


4. Click Open. 
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Inserting a Real Player File 


The default sound icon appears on the page, and the Sound Properties palette 
appears. The name of the ﬁle you selected appears in the File ﬁeld on the 
General tab. You can use the Browse button to select a different sound ﬁle. 


5. To provide text that the browser displays if it cannot play the sound, type a 
description in the AltTag ﬁeld. 


6. In the Display section, select: 


✦ 
Inline to use the audio player for your browser. If site visitors have 
Headspace Beatnik installed on their system, the browser uses that player to 
play the sound. 


✦ 
Icon to select one of the three images to link to the sound. 


✦ 
Picture to select another image ﬁle as the visual link to the sound. Click 
Browse and select an image ﬁle. 


7. Click the HTML button to insert HTML tags and scripts. See Chapter 28, 
“Working with HTML Directly.” 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Inserting a Real Player File 


RealAudio (.ra, .ram, .rm) can play streaming audio on all systems, requires 
RealAudio Web server-resident software, and sometimes includes video. Site 
visitors must install the RealAudio player browser plugin. 


To insert a Real Player ﬁle: 
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Real Player tool 


1. In Page view, select the Real Player tool from the Plug-ins ﬂyout on the 
Advanced toolbar. 


2. Click on the page to indicate the location of the Real Player ﬁle. 


The Open dialog appears. 


3. Select a Real Player ﬁle from your hard disk or LAN, or select a ﬁle already 
used in the site from the Video Assets tab. 


For information about using assets, see Chapter 29, “Managing Assets.” 


4. Click Open. 


The Real Player placeholder graphic appears on the page, and the Real Player 
Properties palette appears. The name of the ﬁle you selected appears in the File 
ﬁeld on the General tab. You can use the Browse button to select a different ﬁle. 


5. To provide text that the browser displays if it cannot play the video, type a 
description in the AltTag ﬁeld. 


6. In the Display section, select: 


✦ 
Inline to display a control that site visitors can use to play the video sound 
track. 


Note: If you select this option, site visitors do not see the video. They only hear the 
sound track. 


✦ 
Icon to select one of the three images to represent the video. When a site 
visitor clicks the icon, Real Player opens playing the speciﬁed video. 
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Inserting Other Types of Files 


✦ 
Picture to use another image ﬁle to represent the video. When a site visitor 
clicks the icon, Real Player opens playing the speciﬁed video. 


7. Click the HTML button to insert HTML tags and scripts. See Chapter 28, 
“Working with HTML Directly.” 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Inserting Other Types of Files 


Although NetObjects Fusion supports a wide variety of media ﬁles, you might have 
other formats, such as Adobe Acrobat PDF ﬁles, that you want to include in your 
site. You can place other ﬁles, including Adobe Acrobat, VRML, RealSpace 
FlashPix ﬁles, and Headspace Beatnik ﬁles, using the Plug-In tool. 


When a site visitor clicks the document’s icon, the ﬁle appears in the visitor’s 
browser or downloads to the visitor’s system. When you insert a ﬁle using the Plug- 
In tool, site visitors need the appropriate plugin for their browser and platform to 
use the ﬁle. 


To insert a ﬁle using the Plug-In tool: 


Plug-In tool 


1. In Page view, select the Plug-In tool from the Plug-ins flyout on the Advanced 
toolbar. 


2. Draw a box to indicate where you want to position the ﬁle. 


The Open dialog appears. 


3. Select a ﬁle from your hard disk or LAN, or select a ﬁle that was already used in 
the site from the Plug-in Assets tab. 


To display the various ﬁle types that NetObjects Fusion supports, use the Files 
of type drop-down list. 


To insert a ﬁle that is not explicitly supported by NetObjects Fusion, choose All 
Files in the Files of type drop-down list, then select the ﬁle. 


4. Click Open. 
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The plug-in placeholder image appears on your page, and the Plug-In Properties 
palette appears. The name of the ﬁle you selected appears in the File ﬁeld on the 
General tab. 


5. To provide text for the browser to display if it cannot display the ﬁle, enter a 
description in the AltTag ﬁeld. 


6. In the Display section, select: 


✦ 
Play inline to display the ﬁle on the page in your site. 


✦ 
Launch from picture to use a picture other than the plug-in icon to represent 
the plugin. When site visitors click the image, the plugin opens in the 
window. Click Browse and select an image ﬁle. 


7. Click the HTML button to insert HTML tags and scripts. See Chapter 28, 
“Working with HTML Directly.” 


8. Select the Advanced tab. 
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Replacing a Media File 


The Advanced options appear. 


9. Set the parameters. Because you can add different parameters for different ﬁles, 
see the associated user guide. 


✦ To edit parameters that appear in the Parameters section, double-click the 
parameter. Enter the value in the Add Plug-In Parameter dialog. 


✦ To add a parameter, click the plus (+) button and enter the parameter name 
and value in the Add Plug-In Parameter dialog. 


✦ To remove a parameter, select it and click the minus (–) button. 


✦ To change the order of the parameters, click the Up or Down arrow buttons. 
The selected parameter moves up or down in the parameters list. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Replacing a Media File 


Sites are constantly changing and evolving. As you build your site or after using it 
for some time, you might want to change a media ﬁle that you used in a speciﬁc 
location. You can replace one ﬁle with another. 


To replace a media ﬁle with a new ﬁle: 


1. In Page view or Assets view, double-click the media placeholder on your page. 


The Open dialog appears. 


2. Select the new ﬁle and click Open. 


Use the Parameters section to add custom 
settings to the plugin. You cannot change 
the plugin’s standard parameters, such as 
height and width 
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Adding Java and ActiveX 
22 


You can make your site more interesting and interactive by adding special 
applications, such as Java applets, Java Beans, or ActiveX controls. NetObjects 
Fusion tools make it easy to insert these items and set their properties. To choose 
appropriate properties settings, you should be familiar with Java or ActiveX before 
you add these types of application ﬁles to your site. A sample Java applet is 
available in the NetObjects Fusion 7.5\Java\Applets folder; sample Java Beans are 
available in the NetObjects Fusion 7.5\Java\Beans folder. 


This chapter describes how to add: 


✦ Java applets and servlets 


✦ Java Beans 


✦ ActiveX controls 
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Inserting a Java Applet or Servlet 


Java applets and servlets are an efﬁcient way to add sound and animation, such as 
scrolling messages and color cycling buttons, to a page. Java applets and servlets 
are platform-independent applications with compact ﬁle sizes. Usually, Java applets 
and servlets run from the client platform, which means site visitors download and 
run them from a browser; however, servlets can include commands that are 
executed on the server. Most browsers are Java-compatible, so site visitors don’t 
need special plugins to run a Java applet. 


To insert a Java applet or servlet: 


Java tool 


1. In Page view, select the Java tool from the Web Applications tools ﬂyout on the 
Advanced toolbar. 


2. Draw a box to indicate the position of the Java applet or servlet. 


The Open dialog appears. 


3. Select a Java ﬁle from your hard disk or LAN, or select one that is currently 
used in the site from the Java Class Assets tab. See Chapter 29, “Managing 
Assets.” 


The extension for a Java ﬁle is .class or .jar. 


4. Click Open. 


The Java placeholder image appears on the page, and the Java Properties palette 
appears. The path to the ﬁle you selected appears in the File ﬁeld on the General 
tab. To select a new ﬁle, click Browse, ﬁnd the ﬁle, and click Open. 


The current .class ﬁle is displayed in the Class ﬁeld. 
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You can also drag a Java .class ﬁle from Windows Explorer onto your page. The 
Java placeholder appears on the page, and you can set the Java properties for 
that ﬁle. 


5. To provide text for the browser to display if it cannot display the ﬁle, enter a 
description in the AltTag ﬁeld. 


6. Select Applet or Servlet depending on which type of ﬁle you are inserting. 


7. If your applet or servlet requires additional ﬁles, click the Additional Files 
button, then click Add in the Java Applet Files dialog. 


8. Select another ﬁle in the Add Java Applet Files dialog, and click Open. Click 
OK to add the selected ﬁle. 


To delete a .class ﬁle from the Class list, click the Additional Files button and 
select the appropriate ﬁle in the Java Applet Files dialog. Click Delete, then 
click OK. 


9. To add parameters to the Java applet, click the Parameters tab. 


This list shows all the 
.class ﬁles that 
NetObjects Fusion detects 
for the selected Java 
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Inserting a Java Bean Component 


This guide assumes you are familiar with Java and understand the effects of 
setting these parameters. In some cases, Java developers provide documentation 
that explains the parameters. 


✦ To edit parameters, double-click the parameter and enter a value in the Enter 
Value dialog. 


For servlets, you can specify that the value is an initialization value for the 
parameter by checking Value is an initializer in the Enter Value dialog. 


✦ To learn more about each parameter, look in the Parameter info section. 


✦ To remove a parameter, select it and click the minus (–) button. 


✦ To add a parameter, click the plus (+) button and enter a name and value in 
the Enter Value dialog. 


✦ To change the order of the parameters in the generated HTML, click the Up 
or Down arrow buttons. The selected parameter moves up or down in the 
Parameters list. 


Inserting a Java Bean Component 


Java Beans are a type of Java applet. Unlike Java applets, which require .class ﬁles 
plus other types of ﬁles, Java Beans are an all-in-one implementation of Java. A 
single .jar ﬁle contains everything required to run the applet. 


To insert a Java Bean: 


Java Bean tool 


1. In Page view, select the Java Bean tool from the Web Applications tools flyout 
on the Advanced toolbar. 


2. Draw a box to indicate the position of the Java Bean. 


The Open dialog appears. 


3. Select a Java Bean ﬁle from the NetObjects Fusion 7.5\Java\Beans folder, or 
select one that is currently used in the site from the Java Archive Assets tab. 


A Java Bean ﬁle can have a .jar or .class extension. Most Java Beans have a .jar 
extension, but some .jar ﬁles might not be Java Beans. If you try to open a .jar 
ﬁle that is not a bean, you see a message from NetObjects Fusion. 


4. Click Open. 
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The Java Bean placeholder appears on the page. Beans have different icons in 
the upper right corner of the placeholder; the icon is created by the bean’s 
author and has no effect on the bean or its behavior. 


The path to the ﬁle you selected appears in the File ﬁeld on the General tab of 
the Java Bean Properties palette. To select a different ﬁle, click Browse, ﬁnd the 
ﬁle, and click Open. The current .class ﬁle is displayed in the Class ﬁeld. 


5. To provide text for the browser to display if it cannot display the ﬁle, enter a 
description in the AltTag ﬁeld. 


6. Select Applet or Servlet depending on the type of bean you are inserting. 


7. If the bean requires other ﬁles, click the Additional Files button, then click Add 
in the Java Applet Files dialog. 


8. Select another ﬁle in the Add Java Applet Files dialog, and click Open. Click 
OK to add the selected ﬁle. 
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Inserting a Java Bean Component 


9. Click the Properties tab. 


Different beans have different sets of properties. This guide assumes you are 
familiar with Java Beans and understand the effects of setting these properties. 
In some cases, Java Bean developers provide documentation that explains the 
properties. 


10. To edit a property, select the appropriate ﬁeld. Some properties require you to 
choose a color or enter a value in a dialog. Other properties toggle True/False or 
require you to type text. In some cases properties appear that have no affect on 
the bean or its behavior. 


11. Click the Parameters tab. 


If you know the bean’s internal parameters, you can add or remove them. 


✦ To add a parameter, click the plus (+) button and enter a name and value in 
the Enter Value dialog. 


✦ If there are parameters listed, to remove one, select it and click the minus (-) 
button. 


✦ To change the order of the listed parameters, select a parameter and click the 
Up or Down arrow buttons. 


12. Publish the page to see how the bean works. 


You can add actions to Java Beans using the Actions tab. When you choose a Java 
Bean as the target or source of an action, you see an expanded selection of available 
actions or trigger events as appropriate. See Chapter 23, “Building Dynamic 
Pages.” 
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Inserting an ActiveX Control 


You use ActiveX controls to embed an application in a Web page. Microsoft 
Internet Explorer 3.x or later supports ActiveX controls with which you can add 
custom capabilities such as audio and movie players, calendars, custom buttons, 
and forms to your pages. You can view documents such as Microsoft Ofﬁce ﬁles in 
Internet Explorer without launching the associated program. Site visitors must use 
Internet Explorer 3.x or later to view content created with ActiveX controls. To 
view the content in Netscape Navigator 4.x, site visitors must install special 
plugins. For information, go to www.microsoft.com. 


To insert an ActiveX control: 


ActiveX Control tool 


1. In Page view, select the ActiveX Control tool from the Web Applications tools 
ﬂyout on the Advanced toolbar. 


2. Draw a box to indicate the position of the ActiveX control. 


The Insert ActiveX Control dialog appears, listing the ActiveX controls 
currently installed on your system. The bottom section shows the selected 
ActiveX control, which has an .ocx or .dll extension. 


3. Select Set codebase to add the codebase parameter to the generated HTML and 
ensure that the ActiveX control is published to the Web site. If a visitor who 
does not have the ActiveX control you are using views the Web site, the option 
to download the control is offered. 


4. Select the control you want and click OK. The ActiveX control appears on your 
page, and the ActiveX Control Properties palette appears. 
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Inserting an ActiveX Control 


The General tab displays the options for the selected control. 


Note: If you use an ActiveX control that references an external ﬁle, such as a .pdf 
ﬁle, you must specify the relative path of the ﬁle as it will be in the ﬁnal 
published site. First you must add the ﬁle as an asset of the site and set it to 
always publish. See “Adding a File Asset” on page 472. To determine the ﬁle’s 
relative path in the ﬁnal site, look at the publish directory structure listed in 
Publish view. 


5. To provide text that the browser displays if it cannot launch the ActiveX control, 
enter the text in the AltTag ﬁeld. 


6. To change an option, select it and enter the information in the ﬁeld. 


✦ To accept any text you enter, click the check mark or move the cursor to 
another ﬁeld. 


✦ To cancel the change, click the X. 


✦ To use the native property page for the ActiveX control, click the Properties 
button. You can change the control’s settings using the native property page 
instead of NetObjects Fusion properties. Some ActiveX controls do not have 
a native property page. 


✦ To insert HTML tags and scripts, click the HTML button. See Chapter 28, 
“Working with HTML Directly.” 


You can add actions to ActiveX controls using the Actions tab. 


Palette options vary 
depending on which 
ActiveX Control is 
selected 
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Building Dynamic Pages 
23 


You can include animations and other interesting effects in your site by adding 
actions to individual objects or pages. You can make objects move on, off, and 
around the screen, hide or show them, bump them with other objects, have them 
exchange places, and so on. Site visitors can drag them around the page. You can 
even have actions respond to a site visitor’s entry in a form. No programming is 
required. You build actions by simply choosing a series of options from menus. 


When you use actions, note that: 


✦ Due to limitations of Internet Explorer and Netscape Navigator, actions work 
only in versions 4.0 and later of Internet Explorer and version 4.x of Netscape 
Navigator. Actions are not supported in Netscape Navigator 6.0. 


✦ You can use actions on pages with AutoFrames; do not use actions on pages 
with frames that were scripted by adding HTML directly. 


✦ For reliable performance, make sure you select Dynamic Page Layout—All 
Browsers as the HTML output method on the Layout Properties palette. If your 
site visitors use only version 4.0 and later browsers, select Fixed Page Layout. 
For Layout Regions containing objects with actions, select Regular Tables. 


This chapter describes: 


✦ Adding actions to pages, objects, and text 


✦ Tailoring actions with custom messages 


✦ Targeting several objects with one action 


✦ Modifying actions 


✦ Scripting your own actions 


✦ Scripting parameter values 


✦ Examples, including a button rollover, collision detection, and a 
slide show 
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How Actions Work 


An action consists of a trigger event that causes the action to begin, a message and 
various parameters specifying what the action does, and one or more targets that 
perform the action. 


✦ A typical trigger event can be a mouse click or simply hovering over a button 
(called a “mouse over”). But the trigger event can also be an event such as a site 
visitor entering or exiting a page. In that case, loading the page might trigger 
pictures to ﬂy across the page. A trigger event can also be another action, so one 
object ﬂying off the page could make another object ﬂy on. 


✦ The action message might be to show or hide an object, make an object ﬂy off 
the page, make an object stick to the pointer so the site visitor can drag it around 
the page, display a dialog or alert, and so on. 


✦ The target can be one or more objects on the page, the page itself, or a 
MasterBorder. 


You add an action to the object that triggers it. For example, suppose you want to 
add an action to a button so when a person clicks the button Picture A ﬂies off the 
page. The action you add to the button has the trigger event “when clicked,” plus 
the action message “ﬂy off the page,” and Picture A as the target. 


To sequence actions, you can trigger one with another. For example, suppose that 
you want the animation to continue so that as soon as the ﬁrst action makes Picture 
A ﬂy off the page, the second action makes Picture B ﬂy on. In that case you add an 
action to Picture A with the trigger event “motion ended,” the action message “ﬂy 
onto the page,” and Picture B as the target. 


These are, of course, only basic examples of what you can do with actions. Many 
more ideas are presented throughout this chapter. Additional information about 
using actions on your Web pages is available from the Workbench link at 


Sends a “ﬂy off the page” 
action message... 
To the target picture, which 
ﬂies off the page 


Clicking a button that 
has an action... 


It sends a “ﬂy onto the 
page” action message... 
To another target picture, 
which ﬂies onto the page 
After a picture with a “motion 
ended” action ﬂies off the page... 
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www.netobjects.com/workbench. The links from the Workbench to Actions and 
JavaScript walk you through typical solutions for building dynamic Web pages. 


Adding Actions to Objects and Pages 


You can add an action to any object, Layout, or MasterBorder. NetObjects Fusion 
comes with several actions you can apply by choosing options from menus. Just 
specify a trigger event to start the action, the action itself, and the object you want it 
to target. 


You can add any number of actions to an object. For example, one action might 
cause a button to highlight when you mouse over it, while another action removes 
the highlighting when you move the mouse away. 


Note: Because MasterBorders can apply to several pages, any object in the Layout that’s 
targeted by an action involving a MasterBorder must be available in all Layouts using 
that MasterBorder. 


1. In Page view, select the item you want to trigger the action, and click the 
Actions tab on the Properties palette. 


Clear the Object initially visible in browser option to hide the object when the 
page loads. For example, if an action targeting this object makes it ﬂy onto the 
page, you will want to hide the object until the ﬂy action is triggered. 


Add action button 


2. Click the plus (+) button on the Properties palette to add a new action. 


The Set Action dialog appears. 


3. Specify the action’s trigger event in the When ﬁeld. 


Lists all actions this object triggers. 
Actions with the same trigger event 
occur in the order listed 


Adds or removes an action 


Changes the order of actions 


NOF7.5UG~1.BOO Page 353 Thursday, January 21, 1904 11:14 PM 


354 


Adding Actions to Objects and Pages 


When menu button 


Click the When menu button next to the ﬁeld, point to a trigger category, and 
click the trigger event you want. 


The trigger events available depend on the object you’re adding the action to. 
These can include: 


✦ 
Mouse. Mouse options do not apply in some cases, including text objects, 
Layouts, and frames. Mouse options are for triggering an action when the 
site visitor clicks the object, mouses down or up (for example, you might 
display a pushed-in picture of a button on mouse down), or moves the 
pointer over or off the object. 


✦ 
Object. Triggers the action when the object is either hidden or shown as the 
result of another action that targets this object. 


✦ 
Page. Triggers the action when the page ﬁnishes loading, or when the site 
visitor opens another page. 


✦ 
Transition, Motion, Drag. In a sequence of actions, triggers the action at the 
start or end of another action that targets this object. For example, ending a 
drag might trigger another action to restore the object you dragged to its 
original position. 


✦ 
Custom. These are messages you create to trigger one action with another for 
specialized action sequences. See “Tailoring Actions with Custom 
Messages” on page 360. 


Trigger categories 


Some of the 
choices available 
for this object 
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4. Make sure Standard Action is displayed in the action type drop-down list. For 
information about scripted actions, see “Scripting Your Own Actions” on 
page 365. 


5. Specify the object your action is to target in the Target ﬁeld. 


Target menu button 


The action can target any object on the page, the Layout itself, or even the 
MasterBorder. By default, it targets the object triggering it. To target another 
object, click the Target menu button next to the Target ﬁeld and choose an object 
from the Object Tree palette. If you add a “Fly Out to Top Right” action to one 
picture and target it at another, for example, clicking the ﬁrst picture can trigger 
the target picture to ﬂy off the page. 


You can also cascade an action to several objects at once; see “Targeting Several 
Objects with One Action” on page 362. 


6. Specify the action you want to occur in the Message ﬁeld. 


Expand or contract levels of the Tree by 
clicking the plus or minus sign for a level 


Select a 
target from 
the Object 
Tree palette 
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Adding Actions to Objects and Pages 


Message menu button 


Click the Message menu button next to the Message ﬁeld, point to a category, 
and click the action you want. 


Your choices for actions depend on the object you’re targeting. These can 
include: 


✦ 
Object. Includes options for hiding, showing, or otherwise arranging the 
target in relation to other objects; adding a delay between the trigger event 
and a subsequent action; loading different images to use for a picture, say to 
show a highlighted button when a site visitor mouses over it. For examples, 
see “Creating a Button Rollover” on page 368 and “Sequencing Actions for 
a Slide Show” on page 373. 


✦ 
Transition, Motion. Redraws the object in any of several ways, or causes it to 
move in some way across, on, or off the page. 


✦ 
Drag. Makes an object stick to the pointer so site visitors can drag it around 
the page. One action might make the object stick on mouse down, while 
another lets the object go on mouse up. For an example, see “Colliding One 
Object with Another” on page 370. 


✦ 
Get Property, Set Property. These actions are typically used as components of 
scripted actions or parameter values, in particular when working with values 
entered in forms. For an example, see “Customizing Default Actions” on 
page 377. 


Action categories 


Some of the 
choices available 
for this target 
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✦ 
Location, Dialog, Window, Browser. These options appear on the menu if the 
target is a Layout or MasterBorder. Use these options to open another URL 
after an animation occurs, display a dialog, set the size, position, or some 
other state of the window; or check what browser the site visitor is using, 
say to trigger a different set of actions depending on the browser type. 


✦ 
Custom. These are messages you create to trigger one action with another in 
specialized action sequences. See “Tailoring Actions with Custom 
Messages” on page 360. 


7. If the action you specify requires parameters or can be tailored with additional 
parameters, specify a value or expression in the Parameters ﬁeld. 


Parameter menu button 


Click the Parameter menu button next to the Parameters ﬁeld and click an 
available option. For example, for a Fly message you can choose a direction 
parameter like In from Top. 


For some actions, you can click Values on the Parameters menu to choose from 
a wider selection of values. 


Primary choices 
available for a Fly 
message 


Opens a dialog with 
all default 
parameter values 
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Adding an Action to Linked Text 


The Parameter Values dialog appears, listing all parameters currently available 
for this action and their default values. 


To modify a value, select a parameter and edit its value in the ﬁeld at the top of 
the dialog. Depending on the parameter, you might type the value, or choose it 
from a drop-down list, or from the Color Picker, Picture File Open dialog, or 
Link dialog. Click OK when you’re done editing parameters. 


You can also write your own JavaScript expression to generate a parameter 
value. See “Scripting Parameter Values” on page 366. 


8. Click OK in the Set Action dialog. 


Adding an Action to Linked Text 


In addition to adding an action to a text block, you can also add an action to linked 
text by creating a smart, Blank link and then setting the text to have an action 
instead of linking to another page. A text link can be a trigger, but cannot be a 
target. 


1. In Page view, select the text. 


Link Tool 


2. From the Object menu, choose Link, or click the Link tool on the Standard 
toolbar. 


The Link dialog appears. 


Parameter values for a Fly 
message 


Whether you type a value 
directly or choose it from a list 
or dialog depends on the 
parameter 


Select a parameter to edit its 
value in the text ﬁeld 
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3. Select Smart Link as the link type and select the Blank link. 


4. Click the Link button. 


5. Click the text you selected earlier. The Text Properties palette now has a Link 
tab indicating a link is deﬁned for the text. 


6. On the Text Properties palette, click the Link tab, then click the Actions button. 


The Actions dialog appears. 


7. Click the plus (+) button and add an action as described in “Adding Actions to 
Objects and Pages” on page 353. 
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Tailoring Actions with Custom Messages 


8. Click OK in the Actions dialog. 


Tailoring Actions with Custom Messages 


You can simplify some action combinations or create specialized sequences by 
triggering actions with custom messages. A custom message is a simple text string 
you create that becomes available in the When menu as a trigger and in the Message 
menu as an action. You can then send it as a wildcard action from one object to 
trigger whatever action is added to another. Some actions also use custom messages 
as parameter values. 


Say you want clicking any of several buttons to trigger an action on a picture, but 
you want to periodically change the action from Wipe to Iris. Instead of having to 
change each button’s action message from Wipe to Iris, you can have each button 
send a custom message that triggers a Wipe or Iris action added to the picture. 
Controlling the effect of each button then requires modifying only the picture’s 
action. Several uses of custom messages are given in “Examples” on page 368. 


To create a custom message: 


1. Select the object you want to trigger the ﬁrst action in a sequence, and click the 
plus (+) button on the Actions tab of the Properties palette. 


The Set Action dialog appears. 


2. In the Set Action dialog, open the When or Message menu, and choose Custom, 
Edit. 


The Custom Messages dialog appears. 


3. Click the plus (+) button. 


Lists all custom messages created 
for this site 


Adds or removes a message from 
the dialog and the menus 
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The Add Message dialog appears. 


4. Type a name for the message and click OK. Do not use spaces or punctuation in 
message names to avoid causing problems when you publish. 


The message is added to the Custom Messages dialog. You can remove it by 
selecting it in the dialog and clicking the minus (-) button. 


5. Click OK in the Custom Messages dialog. 


6. In the Set Action dialog, create an action that sends your custom message to the 
target. 


For example, to make clicking the source object trigger an action added to a 
picture, ﬁll out the Set Action dialog like this: enter Mouse, Clicked in the 
When ﬁeld; the picture object in the Target ﬁeld; and your custom message, 
which is now available in the When and Message menus, in the Message ﬁeld. 


7. Click OK in the Set Action dialog to close it. 


8. Select the target object, click the plus (+) button on the Properties palette, and 
add the action you want the custom message to trigger. 


The Set Action dialog reappears. Enter your custom message in the When ﬁeld, 
and specify a target and action in the remaining ﬁelds. 


9. Click OK in the Set Action dialog. 
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Targeting Several Objects with One Action 


Targeting Several Objects with One Action 


You can target an action at a container object—a Layout, MasterBorder, Layout 
Region, text box, or table—to apply the action to every object in the container. For 
example, clicking a button could hide all objects in a Layout Region. Just select the 
Cascade message option in the Set Action dialog when you create the action. 


Cascading messages work best with custom messages. See “Showing One Object 
While Hiding Others” on page 371 for an example. 


1. In Page view, place the objects you want to target in a Layout, MasterBorder, 
Layout Region, text box, or table. 


Note: Actions sent to a Layout or MasterBorder apply to the entire page, not just the 
Layout or MasterBorder. So cascading a Hide message at a Layout makes the 
entire page go blank. To hide only a subset of objects on the page, put the 
objects in a Layout Region and target it instead. Also, hiding the Layout as a 
Layout Region (or in any container) also hides its contents without cascading. 


2. Select the object you want to trigger the action, and click the plus (+) button on 
the Actions tab of the Properties palette. 


The Set Action dialog appears. 


3. Create an action targeting the container of objects you want the action to apply 
to. 


When ﬁlling out the Set Action dialog, enter the page, Layout, MasterBorder, 
Layout Region, text box, or table in the Target ﬁeld. 
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4. Click OK in the Set Action dialog. 


Triggering the source object targets the action at the container and then at each of 
its objects as they’re listed in the Object Tree palette. 


Keep in mind that the container responds to the action if it can. If the container 
doesn’t know how to respond, it is possible that the child objects might know. In 
this case you can cascade the action so the child objects can respond appropriately. 
For an example of cascading an action, see “Showing One Object While Hiding 
Others” on page 371. 


Target a container 


The action applies to objects 
in the order listed here 
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Modifying Actions 


Modifying Actions 


You can modify an object’s actions, for example, to change a trigger event, to 
reorder actions if the object has more than one, to disable an action, or to delete it 
altogether. 


In Page view, select the object whose actions you want to modify, and click the 
Actions tab on the Properties palette. 


✦ To change the sequence of actions, select an action and click the up or down 
arrow at the bottom of the palette. 


If two or more actions share the same trigger event, they occur in the order 
listed. 


✦ If you don’t want to publish an action now but might want to later, or if you 
want an action available only to use in a scripted action or JavaScript 
expression, clear that action’s check box. Next time the site is published, this 
action is not included, but it is still available to insert in a script or expression. 


✦ To change an action’s properties—its name, trigger event, target, action 
message, and so on—double-click the action and make changes in the Set 
Action dialog. 


✦ To delete an action, select the action and click the minus (-) button. 


The object’s actions are listed here 


An unchecked action doesn’t get 
published but can be used in scripted 
actions and JavaScript expressions 


Reorders the selected action 
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Scripting Your Own Actions 


In addition to the actions NetObjects Fusion provides in the Message menu, 
experienced JavaScript programmers can script their own actions. 


1. In Page view, select the object you want to trigger the scripted action, and click 
the plus (+) button on the Actions tab of the Properties palette. 


The Set Action dialog appears. 


2. Select Scripted Action from the action type drop-down list. 


A text box appears in the dialog. 


3. Enter your scripted action in the text box using JavaScript. 


NetObjects Fusion doesn’t verify code you enter, so be sure to use valid syntax. 
You can use any combination of typing, inserting existing script text from a text 
ﬁle (click Insert Script and open the ﬁle from the File Open dialog), or inserting 
a call to an existing action or function. 


To insert a call to an existing action, click Insert Action. A list of the actions you 
added to the object appears. Select an action to insert and click OK. NetObjects 


Type here 


Inserts text from a text ﬁle 


Inserts a call to an existing action 
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Scripting Parameter Values 


Fusion inserts the action at the insertion point in the text box, in the form 
$(ActionName). 


4. Click OK in the Set Action dialog. 


Note: If you’re scripting an action and need to deﬁne JavaScript functions or other 
parameters, insert the deﬁning script into the Between Head Tags ﬁeld of the Layout 
HTML or Master HTML as appropriate. 


Scripting Parameter Values 


You can customize an action’s parameter values instead of choosing from the ones 
NetObjects Fusion provides by generating them with a JavaScript expression. For 
example, you might use the value a site visitor types in a form object as the number- 
of-seconds value in a Delay action. 


If you know JavaScript, you can enter expressions directly. You can also modify 
code for the default values NetObjects Fusion creates, and you can assemble 
expressions out of an object’s other actions. For example, an expression might test 
for a particular condition—like time of day—and then trigger actions you created 
with the Set Actions dialog based on that condition. Just as the Values dialog often 
lists several values, an expression can generate one or more values, too. 


For an example even nonprogrammers can try, see “Customizing Default Actions” 
on page 377. 


Selecting this action and 
clicking OK... 


Inserts the action call $(FlyOut) in your script 
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1. In Page view, select the object whose parameter values you want to script, and 
add any actions you want to use as components of the JavaScript expression. 


For these actions, ignore the When ﬁeld, since each action is triggered by the 
expression. Also, if an action’s only purpose is to be called by the expression, 
disable the action by clearing the check box next to it on the Actions tab of the 
Properties palette. 


2. Create the action whose parameter value you want generated by the expression, 
as described in “Adding Actions to Objects and Pages” on page 353. Or, open 
an existing action by double-clicking it on the Actions tab of the Properties 
palette. 


3. In the Set Action dialog, open the Parameters menu and choose Expression. 


The JavaScript Expression dialog appears. If the action already has default 
parameter values, the dialog displays the code for those values. 


4. Enter your own JavaScript to generate the parameter value, or modify the code 
that’s already there. NetObjects Fusion doesn’t verify code you enter, so be sure 
to use valid syntax. 


To build your expression around existing actions, click the Insert Action button, 
select an action from the Actions dialog, and click OK. NetObjects Fusion 
inserts the action at the insertion point, in the form $(ActionName). 


5. Click OK in the JavaScript Expression dialog and again in the Set Action 
dialog. 


When the action is triggered, it uses the parameter values generated by your 
expression. 


Enter a JavaScript expression here, 
replacing or modifying existing code 


Opens a list of actions you can call 
from the expression 
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Examples 


Creating a Button Rollover 


You can use the Set Image and Use Image actions to give three-dimensional feel to 
a button, for example, by highlighting it when the site visitor’s pointer passes over 
it, by making it appear pushed in when pressed, and so on. 


For this example, you need three pictures of a button—one showing how it looks 
when the page loads, one showing it highlighted, and one showing it pressed. 


Note: This example applies to images of buttons, but not to form buttons. The Set Image 
action is not available for form buttons. 


1. In Page view, place the picture of the button as it looks when the page loads. 


2. To add an action to the button, click the Action tab on the Picture Properties 
palette, and click the plus (+) button. The Set Action dialog appears. 


3. In the When ﬁeld, from the Page drop-down menu choose Page Loaded. Click 
the Target Menu button next to the Target ﬁeld and, from the Object Tree dialog 
that appears, select the button object. In the Message ﬁeld, from the Object 
drop-down menu choose Set Image. 


4. From the Parameters drop-down menu, choose Values. 


The Parameters dialog appears. 


Highlighted button 


Button’s look when the page loads 
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5. Identify when to use which picture ﬁle. Make sure the “loaded” version of the 
button is selected for the Image 1 (Normal) value. Then select the highlighted 
button for Image 2 (Highlighted), and the pressed version for Image 3 
(Depressed). 


6. To specify a picture ﬁle in a Set Image action’s Values dialog, select a value, 
click the button next to the edit ﬁeld, and open a ﬁle from the Picture File Open 
dialog. Click OK. 


7. Add four actions to the button, ﬁlling out the Set Action dialog for each action 
like this: 


Action 1. Enter Mouse, Mouse Over in the When ﬁeld; the button itself in the 
Target ﬁeld; and Object, Use Image in the Message ﬁeld. Then open the 
Parameters menu and click Image 2 (Highlighted). 


Action 2. Enter Mouse, Mouse Out in the When ﬁeld; the button in the Target 
ﬁeld; Object, Use Image in the Message ﬁeld; and Image 1 (Normal) in the 
Parameters ﬁeld. 


Action 3. Enter Mouse, Mouse Down in the When ﬁeld; the button in the Target 
ﬁeld; Object, Use Image in the Message ﬁeld; and Image 3 (Depressed) in the 
Parameters ﬁeld. 


Action 4. Enter Mouse, Mouse Up in the When ﬁeld; the button in the Target 
ﬁeld; Object, Use Image in the Message ﬁeld; and Image 2 (Highlighted) in the 
Parameters ﬁeld. 


To link the rollover button to another page, you can add one more action. In the 
When ﬁeld, from the mouse drop-down menu choose Clicked, in the Target 
ﬁeld choose layout, in the Message ﬁeld from the Location menu choose Go to 
URL, and in the Parameters ﬁeld from the drop-down menu choose Values and 
select the link to go to. 


Parameter values for a Set Image action 
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8. Preview the page to test your rollover. Mouse over the button to see it 
highlighted, and click it to see it pushed in. 


Colliding One Object with Another 


This example demonstrates a drag action, collision detection, and custom 
messages, where dragging one object into another makes the second object ﬂy off 
the page. 


1. In Page view, add two objects to the page. 


2. Make sure the ﬁrst object (the one you plan to drag) is in front of the second 
object. 


3. Make a note of each object’s ID as it appears on the Action tab of the properties 
palette. 


4. Select the ﬁrst object and create a custom message named FlyAway, as 
described in “Tailoring Actions with Custom Messages” on page 360. Create an 
action to use in creating the custom message and then delete it. 


5. Add an action to the ﬁrst object (as described in “Adding Actions to Objects and 
Pages” on page 353) so that mousing down on it makes it stick to the pointer 
until you mouse up. 


In the Set Action dialog, enter Mouse, Mouse Down in the When ﬁeld; the ﬁrst 
object in the Target ﬁeld; Drag, Start Drag in the Message ﬁeld; and Until 
Mouse Up in the Parameters ﬁeld. 


6. Add a collision detection action to the ﬁrst object like this: 


In the Set Action dialog, enter Page, Page Loaded in the When ﬁeld; the ﬁrst 
object in the Target ﬁeld; and Drag, Set Collision Detection in the Message 
ﬁeld. Then open the Values dialog from the Parameters menu and specify the 
second object for the Object ID value (type the object’s ID exactly as it appears 


Your message becomes available in the 
When and Message menus 
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on the Actions tab of its properties palette), and enter FlyAway for the Message 
value. 


When the ﬁrst object is dropped over the second, it sends the FlyAway message 
to the ﬁrst object. 


7. Add yet another action to the ﬁrst object that’s triggered by the FlyAway 
message and tells the second object to ﬂy off the page. 


In the Set Action dialog, enter Custom, FlyAway in the When ﬁeld; the second 
object in the Target ﬁeld; Motion, Fly in the Message ﬁeld; and Out To Top in 
the Parameters ﬁeld. 


Then preview the page to test your collision. Drag the ﬁrst object over the second, 
drop it there, and watch the second object ﬂy off the page. 


Showing One Object While Hiding Others 


Here’s an example of cascading a custom message to build a sequence of actions 
where displaying one object selectively hides others. 


Say your page displays a map showing the locations of ﬁve company ofﬁces. For 
each location, a button superimposes a text box on the page proﬁling that ofﬁce’s 
activities. When a site visitor clicks a location, you want to hide any proﬁle that’s 
currently visible, and then display the one describing the selected location. 


1. In Page view, place the buttons and text boxes in the Layout area, arranging 
them however you want. 


ID of the object being dragged 


Custom message sent to trigger the 
other object to ﬂy away 


Values for a collision detection action 
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2. Select one of the buttons and create a custom message called HideAllProﬁles, 
as described in“Tailoring Actions with Custom Messages” on page 360. 


3. To each button, add an action, as described in “Adding Actions to Objects and 
Pages” on page 353, so clicking the button cascades the HideAllProﬁles 
message to the Layout. 


In the Set Action dialog, enter Mouse, Clicked in the When ﬁeld; the Layout in 
the Target ﬁeld; and Custom, HideAllProﬁles in the Message ﬁeld. Also, check 
the Cascade message option. 


4. Add a second action to each button so clicking it targets a Show message to the 
text box associated with the button. 


In the Set Action dialog, enter Mouse, Clicked in the When ﬁeld; the text box 
this button should display in the Target ﬁeld; and Object, Show in the Message 
ﬁeld. 


5. Select each text box, and on the Actions tab of the Properties palette, clear the 
Object initially visible in browser option. 


6. Add an action to each text box that’s triggered by the HideAllProﬁles message 
and hides the text box. 


In the Set Action dialog, enter Custom, HideAllProﬁles in the When ﬁeld; the 
text box itself in the Target ﬁeld; and Object, Hide in the Message ﬁeld. 


Then preview the page. Clicking a button should send HideAllProﬁles as a 
cascading action message to the Layout. The Layout doesn’t have any actions 
triggered by this message so it doesn’t respond. But it does cascade the message 
down to its embedded objects. As a result, every object on the page receives the 
message. But only those objects with actions triggered by the message—the text 
boxes—respond by hiding themselves. Next, the button sends a Show message to 
its associated text box, which makes itself visible. 


Your message becomes available in the 
When and Message menus 


Clear this option for each text box so its 
contents don’t appear until the site 
visitor clicks the appropriate button 
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Without cascading messages you’d have to add four additional actions to each 
button—one for hiding each text box. If you didn’t use a custom message to trigger 
the text boxes to hide, cascading a Hide message to the Layout would hide every 
object on the page. 


Sequencing Actions for a Slide Show 


Here’s an example of using custom messages and a delay action to build a slide 
show. When the page loads, a slide ﬂies onto the page, stays there for the duration 
of time speciﬁed by a delay, ﬂies off, and is followed by another slide. 


Before you begin, gather the pictures you want to show in each slide and set the 
HTML output to Fixed Page Layout. 


1. In Page view, create a Layout Region, and in it, place pictures and text for your 
ﬁrst slide. 


By creating each slide in a Layout Region, you can include multiple objects per 
slide. 


2. Select the Layout Region and clear the Object initially visible in browser option 
on the Actions tab of the Properties palette. 


You clear this object so the slide doesn’t appear until an action triggers it to ﬂy 
onto the page. 


3. Create three custom messages named ShowPicture, PictureIsIn, and 
DelayIsDone, as described in“Tailoring Actions with Custom Messages” on 
page 360. 


Using custom messages rather than a generic End Motion trigger to trigger each 
slide’s entrance and exit lets you control exactly which motion triggers what. 


4. Add ﬁve actions to the Layout Region, as described in“Adding Actions to 
Objects and Pages” on page 353. For each action, ﬁll out the Set Action dialog 
like this: 


Action 1. Enter Page, Page Loaded in the When ﬁeld; the Layout Region in the 
Target ﬁeld; and Custom, ShowPicture in the Message ﬁeld. 


Your messages become available 
under Custom in the When and 
Message menus 
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Action 2. Enter Custom, ShowPicture in the When ﬁeld; the Layout Region in 
the Target ﬁeld; and Motion, Fly in the Message ﬁeld. Then open the Values 
dialog from the Parameters menu, enter a Direction value of 270 (degrees), and 
make sure Visibility is set to Show, which tells the picture to ﬂy in from the left. 
Also enter PictureIsIn as the Completion Message. 


You deﬁne the Fly action’s parameters in the Values dialog, instead of choosing 
In From Left from the Parameters menu, so you can trigger the next action with 
a custom message. 


Action 3. Enter Custom, PictureIsIn in the When ﬁeld; the Layout Region in the 
Target ﬁeld; and Object, Delay in the Message ﬁeld. Then open the Values 
dialog from the Parameters menu and enter DelayIsDone as the Custom 
Message, and 2 for the Delay value. 


The arrival of the ﬁrst slide triggers a two-second delay after which the 
DelayIsDone custom message is sent to trigger the next two actions. 


Action 4. Enter Custom, DelayIsDone in the When ﬁeld; the Layout Region in 
the Target ﬁeld; Motion, Fly in the Message ﬁeld; and Out To Right in the 
Parameters ﬁeld. 


After two seconds, the slide ﬂies off the page. 


These two settings are equivalent 
to choosing In From Left from 
the Parameters menu 


When the Fly action is complete, 
this custom message is sent to 
the target to trigger the next action 


Values for a Fly action 


The message sent to the target to trigger 
the next action, after this delay 


The duration of the delay, in seconds 


Values for a Delay action 
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Action 5. Enter Custom, DelayIsDone in the When ﬁeld; the Layout Region in 
the Target ﬁeld (you change this later); and Custom, ShowPicture in the 
Message ﬁeld. 


Also after two seconds, another slide ﬂies onto the page. 


5. Create the second slide by copying and pasting the entire Layout Region, and 
placing the copy directly on top of (not inside) the ﬁrst Region. 


Copying the Layout Region copies its actions, too, so you don’t have to add the 
same actions over and over to subsequent slides. 


To stack Layout Regions without inserting one in the other, select the Regions 
and align them using the Align buttons on the Multi-Object Properties Palette. 


6. Select the new Layout Region, replace its contents with the contents for your 
second slide, and delete its ﬁrst action from the Actions tab on the Properties 
palette. 


To make sure you’re working with the second Layout Region’s actions, open the 
Object Tree palette (from the View menu choose Palettes, Object Tree), and 
select the Region. 


7. Copy and paste the second Layout Region once for each remaining slide. Align 
the resulting Regions on top of each other as you did in step 5. While working 
with each Layout Region, replace its contents with those for a new slide. 


You can uncover a Layout Region to work on in Page view by selecting Regions 
in the Object Tree palette and using the Hide Object or Show Object command 
on the Object menu. Also in the Object Tree palette, you can rename Regions 
Slide1, Slide2, and so on to keep track of which slide is which. 
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8. Edit the last action of all but the last slide so it targets the next slide in the show. 


Double-click the action on the Actions tab of the Properties palette to open the 
Set Action dialog and change the target. 


9. For the last slide, deactivate all but the ﬁrst action by clearing the box to the left 
of the action. 


By deactivating rather than deleting actions that target another currently 
nonexistent slide, you can easily add slides to your show later by reactivating 
and targeting the actions at a new slide. 


Double-click the last 
action of Slide 2... 


and edit the action to 
target the Show Picture 
action at Slide 3 


to open the Set Action 
dialog... 


The last slide’s actions 


Clear the box next to each 
action that doesn’t apply to the 
last slide, so the actions aren’t 
published 
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Make sure Fixed Page Layout is selected as the HTML output method on the 
Layout Properties palette and that Word wrap is cleared in the HTML Options 
dialog you access from the Site Settings General tab. Then preview the page to test 
your slide show. 


Loading the page sends a ShowPicture action to the ﬁrst slide, triggering it to ﬂy 
onto the page. The completion of the Fly action sends a message that triggers a two- 
second delay, after which another custom message triggers both the exit of the 
current slide and the entrance of the next. 


Customizing Default Actions 


The trigger events, action messages, and default parameter values available in the 
Set Action dialog are deﬁned in the JavaScript Beans (.jsb) and JavaScript (.js) ﬁles 
in the NetObjects Fusion 7.5\NetObjects System folder. If you’re experienced in 
JavaScript programming, you can add your own .jsb and .js ﬁles to provide even more 
choices in the Set Action dialog. 
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Customizing Default Actions 
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Referencing and Editing 
External HTML 
24 


In addition to content you create and maintain in Page view, your site might also 
include pages that require special, hand-coded HTML. Instead of importing and 
converting this HTML, you can reference HTML ﬁles externally and place them 
anywhere in your site. 


You can manage the external assets for your referenced ﬁle in Assets view. Also, 
apply a consistent look to the published pages of referenced ﬁles by assigning a 
MasterBorder. You can edit referenced ﬁles in HTML Source view or in an external 
HTML editor such as Notepad or Macromedia HomeSite. To specify a default 
external HTML editor, see “Setting Program Options” on page 20. 


Note: You can reference ﬁles located on a hard disk or LAN, but not from a remote Web server. 
Also, <A HREF> links in the original HTML ﬁles should point to other HTML ﬁles and 
anchors within those ﬁles using relative rather than absolute path names. See 
“Managing Referenced Assets” on page 387 for information. 


This chapter describes how to work with external HTML by: 


✦ Referencing HTML from Site view, Page view, or as an object 


✦ Toggling referenced layouts and objects 


✦ Managing referenced assets 


✦ Publishing native HTML 


✦ Previewing and publishing unmanaged assets 


NOF7.5UG~1.BOO Page 379 Thursday, January 21, 1904 11:14 PM 


380 


Using Referenced Files 


Using Referenced Files 


By referencing an external ﬁle instead of importing it, you can keep the original ﬁle 
intact and maintain it outside of NetObjects Fusion. When you import a ﬁle instead 
of referencing it, the ﬁle becomes a page in the site, and is maintained within 
NetObjects Fusion. 


Referenced ﬁles become another page in your site but are maintained separately 
unless you convert them to NetObjects Fusion. Imported ﬁles can be either HTML 
pages created by someone else or document ﬁles that you want to add as text boxes 
on your page. Once you import a ﬁle, you maintain it in your site like any other 
page. 


You can add an external HTML ﬁle as: 


✦ A page that appears exactly as it appears in its original ﬁle. 


✦ A page that appears with your default MasterBorder. 


✦ An individual object on a page. 


See “Referencing HTML from Site View” on page 380 and “Referencing HTML as 
an Object” on page 384. 


When you reference an HTML ﬁle, NetObjects Fusion copies all of its data to a 
new HTML ﬁle before it is published. The original HTML ﬁle remains on your 
local machine; it is not uploaded to the server when you transfer the site. Because 
of this, you cannot dynamically update the original ﬁle by uploading a new 
referenced ﬁle to the server. 


Referencing HTML from Site View 


You can reference an entire site or section of a site from Site view. For example, 
you might reference an existing site you want to manage with NetObjects Fusion 
now and convert later. Or, you can reference ﬁles you prefer to maintain in their 
native code. 


Note: For links to work between the HTML ﬁles you reference, use relative path names in the 
original <A HREF> tags, keep all HTML ﬁles in the same directory, and publish ﬁles 
using the same directory structure as the original site. See “Managing Referenced 
Assets” on page 387 for information. 
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When you reference HTML from Site view, NetObjects Fusion publishes the 
<HEAD> content from the original ﬁles, along with <HEAD> content it generates. 


1. In Site view, select the page to be the parent of the pages you reference. 


2. From the File menu, choose Reference External HTML. 


The Reference External HTML dialog appears. 


3. Click Browse. 


The Open dialog appears. 


4. Select the top-level HTML ﬁle you want to reference, and click Open to return 
to the Reference External HTML dialog. 


✦ 
Assign MasterBorder. Choose a MasterBorder from this drop-down list. Each 
HTML ﬁle you reference occupies the Layout area of a page, while the 
MasterBorder gives pages the consistent look of your site. To display 
external content with its original look, choose ZeroMargins. If the HTML 
contains frames, you must choose the ZeroMargins MasterBorder. 


NetObjects Fusion adds the top level 
page you’re referencing here, and its 
children below 


Select an existing page and 
choose the Reference 
External HTML command 


NetObjects Fusion references 
this ﬁle and its child ﬁles 


Display referenced HTML on 
pages with your site’s 
MasterBorder, or choose 
ZeroMargins to publish external 
content with its original look 
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Referencing HTML from Page View 


✦ 
Limit number of pages to. Select this option to enter the number of ﬁles to 
reference. NetObjects Fusion begins with the Home page you select and 
stops referencing when it reaches the end of the site or the number of pages 
entered here. 


Note: NetObjects Fusion only follows <A HREF> links; it cannot follow links in 
JavaScript or cgi scripts. 


✦ 
Down to structural level. Select this option to enter how many levels of your 
SiteStructure to reference. NetObjects Fusion references as many pages as 
possible at a higher level before going to a lower level. 


✦ 
Do not manage or move assets. If you select this option, NetObjects Fusion 
doesn’t copy external assets into Assets view. Do this if you prefer that path 
names in the published HTML not be edited from your native code. 
However, you then have to manage images and other assets yourself. See 
“Publishing Unmanaged Assets” on page 389. 


5. Click OK. 


The referenced ﬁles appear in Site view, where you can rename them just like other 
pages. To keep track of externally referenced pages, you can color code the page 
icons in Site view. See “Setting Site Management Properties” on page 38. 


From Site view, going to Page view displays the external ﬁle in HTML Source 
view, where you can edit its HTML code. 


Referencing HTML from Page View 


You can reference an external HTML ﬁle as the Layout area of a page from Page 
view, and incorporate the ﬁle’s <HEAD> content—for example, to include existing 
META tag keywords or JavaScript deﬁnitions. 


1. Create a page in Site view. 


2. In Page view, from the File menu, choose Reference External HTML Page. 


The Reference External HTML Page dialog appears. 


3. Click Browse. 


The Open dialog appears. 
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4. Select the external ﬁle you want to reference, and click Open to return to the 
Reference External HTML Page dialog. 


If the ﬁle is already referenced elsewhere in the site, avoid creating a duplicate 
asset by clicking the HTML Assets tab and selecting the ﬁle from there. 


5. Choose whether to import the referenced ﬁle’s <HEAD> content and manage 
external assets. 


✦ 
Import <HEAD>. Select this option to publish the external HTML page’s 
<HEAD> content. Choose Append to Current <HEAD> to add external 
<HEAD> content to what NetObjects Fusion generates, or choose Replace 
Current <HEAD> to publish only the external page’s <HEAD> content. 
Note that this setting is not persistent (that is, it is not retained by 
NetObjects Fusion between sessions), so you must choose this option for 
each referenced page. 


Caution: Don’t select Replace Current <HEAD> if the page contains actions, 
navigation bars with rollover buttons, or is being published using the Fixed 
Page Layout output option. NetObjects Fusion generates <HEAD> content 
these options require. 


Open a ﬁle from this tab to add a 
new asset to the site 


Open a ﬁle from this tab to reuse 
an existing asset 


NetObjects Fusion places this 
ﬁle’s <BODY> in the Layout area 
of your new page 


Check here to also publish the 
ﬁle’s <HEAD> content... 


...either in addition to, or instead 
of, the <HEAD> NetObjects 
Fusion generates 
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Referencing HTML as an Object 


✦ 
Do not manage or move assets. If you select this option, NetObjects Fusion 
doesn’t copy any external assets into Assets view. Do this if you prefer that 
path names in the published HTML not be edited from your native code. 
However, you then have to manage images and other assets yourself. See 
“Publishing Unmanaged Assets” on page 389. 


6. Click OK. 


In Page view, a placeholder for the referenced HTML ﬁlls the Layout area. 


Double-click the referenced Layout area to edit the referenced ﬁle in HTML Source 
view. To edit the ﬁle in an external editor, right-click and choose Open File In 
External Editor from the shortcut menu. To specify a default external HTML editor, 
see “Setting Program Options” on page 20. 


Referencing HTML as an Object 


You can reference an external ﬁle as an individual object on a page. For example, 
you can reference an ad banner, an applet created by a Java generator, or any other 
object requiring special code. 


You can even reference several external ﬁles on a page. For example, you might 
construct a front page for a company newsletter that includes a slot for each of 
several externally maintained story leads. 


Information about the 
referenced ﬁle 
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As when you reference HTML as a Layout area, you can incorporate each ﬁle’s 
<HEAD> tags and script deﬁnitions to include existing META tag and script 
deﬁnitions. 


To reference HTML as an object: 


External HTML tool 


1. In Page view, choose the External HTML tool from the Advanced toolbar. 


2. Draw a box where you want the referenced content to appear. 


Put the box in the Layout area to publish the content on one page, or in the 
MasterBorder to publish it in the border of several pages. 


The Reference External HTML Page dialog appears. 


3. Click Browse, select the external ﬁle you want to reference, and choose whether 
to import the ﬁle’s <HEAD> content and manage external assets, as described 
in “Referencing HTML from Page View” on page 382. 


4. Click OK. 


A placeholder for the referenced HTML ﬁle ﬁlls the box. Preview the page to see 
the object. If necessary, go back and adjust the box’s position in Page view to get 


This ﬁle’s <BODY> is published 
in the HTML table cell generated 
for the object 


Check here to also publish the 
ﬁle’s <HEAD> content... 


...either in addition to, or instead 
of, the <HEAD> NetObjects 
Fusion generates 
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Toggling Referenced Layouts and Objects 


the spacing you want. As with other objects, you can drag a referenced object 
around the page, drag it inside other objects, or even layer it. 


Double-click the referenced HTML placeholder to edit the referenced ﬁle in HTML 
Source view. To edit the ﬁle in an external editor, right-click and choose Open File 
In External Editor from the shortcut menu. To specify a default external HTML 
editor, see “Setting Program Options” on page 20 


Toggling Referenced Layouts and Objects 


You can resize a referenced HTML ﬁle so it becomes an object in the Layout 
instead of taking up the entire Layout area. You can do this to make room for other 
objects in the Layout area. Conversely, you might want to size a referenced object 
to ﬁll the entire Layout area. You can also import the referenced object into 
NetObjects Fusion. 


1. In Page view, click in the referenced Layout area or object you want to resize. 


Add other referenced objects 
as well as pictures, media, and 
objects created in NetObjects 
Fusion 


Referenced object 


Adds or removes resize handles 
from referenced HTML 


Displays the source code in HTML Source 
view 


Imports the object into NetObjects Fusion 
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2. On the General tab of the External HTML Properties palette: 


✦ Select Size to layout to remove resize handles from an object, which ﬁlls the 
Layout. You can then use the Convert to Fusion button to import the 
referenced object into NetObjects Fusion. 


Note: Avoid sizing a referenced object to a Layout if there are other objects in the 
Layout area. You might get unexpected results in some browsers. 


✦ Clear Size to layout to add resize handles to a referenced Layout area, so 
you can resize it, move it, and add other objects. 


✦ Click Edit HTML File to edit the referenced ﬁle on the HTML Source tab. 


Managing Referenced Assets 


When you reference an external HTML ﬁle, NetObjects Fusion lists the HTML ﬁle 
in Assets view. Unless you choose otherwise, it imports into Assets view pictures, 
applets, media, and most other external assets the ﬁle references. 


You can move external assets in your directory structure in Publish view while 
maintaining paths. When you publish, NetObjects Fusion edits paths to the assets 
so they can be found. For example, depending on your original and published 
directory structures, NetObjects Fusion might change the original HTML’s <IMG 
SRC="Images/Logo.gif"> to <IMG SRC="../Index/Logo.gif"> in the published HTML. 


However, NetObjects Fusion doesn’t edit paths to other HTML ﬁles, or to target 
anchors within <A HREF> tags. For these links to be maintained, the path names in 
the original ﬁles must work as-is when you publish. The original <A HREF> tags 
should use relative rather than absolute path names, for example, use 
<A HREF="Index.html"> rather than <A HREF="HTTP://www.your_original_domain.com/ 
Index.html">. You must position external HTML ﬁles in your NetObjects Fusion 
directory structure so the original paths work. See “Customizing Your Site’s 
Directory Structure” on page 508. 


NetObjects Fusion manages external assets referenced by these tags: 


✦ <IMG SRC=> 


✦ <A HREF=> to non-HTML assets, such as sound ﬁles 


✦ <BODY BACKGROUND=> 


✦ <EMBED SRC=> 


✦ <BGSOUND SRC=> 
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Publishing Native HTML 


✦ <SCRIPT SRC=> 


✦ <INPUT SRC=> 


✦ <APPLET CODE=> 


Although NetObjects Fusion manages external applets that are assets of referenced 
HTML, it might not manage certain classes referenced by the applets. Look in 
Assets view to see if any classes you reference aren’t listed. Then see “Publishing 
Unmanaged Assets” on page 389 for information on getting these classes and other 
unmanaged assets to the \Preview folder or Web server. 


Once an external asset is imported into Assets view, you can use it anywhere 
throughout your site. Deleting referenced HTML from your site removes its assets 
from Assets view unless they’re in use elsewhere. 


Publishing Native HTML 


When you preview or publish referenced HTML, NetObjects Fusion copies the 
HTML from the original ﬁles to a location in the publish folder. Note that some 
links may not work in Preview. If managing external assets or including 
MasterBorders, NetObjects Fusion also adds its own code to the published HTML. 
Of course it never modiﬁes your original ﬁles. 


If you don’t want HTML added to the original code when the site is published, you 
can choose these options in the Reference External HTML and Reference External 
HTML Page dialogs. 


When you reference HTML 
from Page view, choose 
Replace current <HEAD> 


In either case, select this 
option 


When you reference HTML 
from Site view, choose the 
ZeroMargins MasterBorder 
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✦ When you reference from Site view, choose the ZeroMargins MasterBorder. 
NetObjects Fusion doesn’t add MasterBorder information to the published 
HTML or impose a table structure. 


✦ When you reference from Page view, choose Replace Current <HEAD> from 
the Import <HEAD> drop-down list. NetObjects Fusion publishes the original 
<HEAD> as-is, without adding HTML of its own. 


Don’t do this if you’re using actions or navigation bars with rollover buttons on 
the page, or publishing using the Fixed Page Layout output option. 


✦ In either case, select Do not manage or move assets. NetObjects Fusion doesn’t 
copy external assets into Assets view, so it doesn’t edit path names in the 
published HTML. However, this means you have to publish images and other 
assets yourself. See “Publishing Unmanaged Assets” on page 389. 


✦ Be sure Size to layout is selected on the External HTML Properties palette in 
Page view. 


Publishing Unmanaged Assets 


If you choose not to manage assets when you reference external HTML ﬁles, you 
have to get external pictures, media ﬁles, applets, and other assets to the Web server 
yourself. 


You can upload the ﬁles to the server from wherever they reside using an FTP 
utility. Or, use the New File Asset command to copy assets into Assets view so they 
are published with the rest of the site. 


1. In Assets view, from the Assets menu, choose New File Asset. 


The File dialog appears. 


2. Click Browse in the dialog to open an external asset you want to publish, and 
type a name for the asset. See “Adding a File Asset” on page 472. 


3. Select Always publish ﬁle and click OK. 


This causes the ﬁle to be published, even though it’s not listed as being in use. 


4. In Publish view, position the asset in your directory structure so when it’s 
published, it can be found by any HTML page referencing it. 
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Publishing Unmanaged Assets 


Because paths to unmanaged assets aren’t edited in the published HTML, you 
must position assets so the original paths work. See “Customizing Your Site’s 
Directory Structure” on page 508. 
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Designing and 
Implementing Forms 
25 


You can add forms to your site to collect information from site visitors; for 
example, to survey potential customers, conduct credit-card transactions, have 
customers register products, or otherwise process information visitors submit. 


Using forms, visitors can type in text ﬁelds, and select options using check boxes, 
radio buttons, and combo boxes. You can use the NetObjects Form Handler 
component to have responses posted in an email or copied to a text ﬁle on your Web 
server. Or, you can assign a Common Gateway Interface (CGI) script to process 
responses, for example, by summarizing them on a conﬁrmation page. Check with 
your server administrator or ISP for setup information. 


You can also use JavaScript or Visual Basic routines with forms. See Chapter 28, 
“Working with HTML Directly.” 


This chapter includes: 


✦ Creating forms 


✦ Adding text ﬁelds, check boxes, radio buttons, and combo boxes 


✦ Adding Submit, Reset, and custom buttons 


✦ Submitting data via email or to a text ﬁle 


✦ Processing data with a CGI script 


✦ Adding hidden ﬁelds for client-side parameters 
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Creating a Form 


Creating a Form 


With NetObjects Fusion, you can devote an entire Layout area to a complex form 
containing many items, or create one or more smaller forms, each in a Layout 
Region, table, or text box. One form might log product registrations, for example, 
while another emails customer comments to a product manager. You can also add a 
form to the MasterBorder so it appears on several pages. 


Form Area tool 


1. In Page view, select the Form Area tool from the Standard toolbar, and draw a 
rectangle in the Layout area or MasterBorder. 


The Create Form dialog appears. 


2. Select a type of form. 


✦ 
Create position-based form (Layout Region) creates a form in a Layout Region 
that you can resize and drag anywhere on the page. When you add form 
objects, text boxes, and other objects to the Layout Region, you can freely 
position and align them, just as you position objects in a Layout area. 


✦ 
Create text-based form (Text box) creates a form in a text box. Text you type 
and form objects you add appear sequentially, just as when you type. This is 
a good choice for forms that have a lot of text, where objects appear 
sequentially, or that have a simple layout, like a row of check boxes or a 
single column of ﬁelds. A text box form typically generates less HTML 
when you publish than a Layout Region form. 


✦ 
Create form in a Table creates a table where you can line up form objects by 
inserting them in table cells. Each cell acts like a text box, where you type 
and add objects just as you add other objects to a table. You can only have 
one table for the entire form. 


If you deﬁne a Layout, Layout Region, or text box as a form, you can insert 
multiple tables to help align form objects. 


Good for forms that include a lot of text 
or have a simple layout 


Useful for forms with a rigid tabular layout 


Provides ﬂexibility in arranging form objects 
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✦ 
Deﬁne Layout as a form (limits page to one form) creates a single form on the 
page that occupies the entire Layout area. 


3. Click OK. 


4. Add ﬁelds, check boxes, and other objects to your form, along with images and 
other content, as described in “Adding Objects to a Form” on page 394. 


You can also turn an existing Layout or container object into a form. Click the 
Layout area, Layout Region, text box, or table, and select the form option on the 
General tab of the Properties palette; for example, Text box is a form. 
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Adding Objects to a Form 


Adding Objects to a Form 


You can add any standard form objects to a form, including single- and multiple- 
line text ﬁelds, check boxes, radio buttons, scrolling lists, and drop-down lists. 


You add objects to a form using the Form toolbar. This toolbar appears when you 
ﬁrst create the form, or you can open the toolbar from the View menu by choosing 
Toolbars, Form Tools. 


Arrange and align the ﬁelds, check boxes, and other objects in a form, just as you 
would arrange objects in a Layout area, table, or text box. You must place form 
objects inside a form to make them work as part of the form. If you don’t place 
form objects inside a form, a red warning icon appears in the form object. 


To minimize the HTML generated by a Layout Region form, align its objects using 
the options on the Multi-Object Palette or organize the objects in tables or text 
boxes. See “Aligning and Distributing Objects” on page 87, “Embedding Objects in 
a Text Box” on page 119, and “Adding Text and Pictures to Cells” on page 230. 


Edit ﬁelds 


Radio buttons 


Form buttons 


Check boxes 


Drop-down list 


Scrolling list 


Multi-line text ﬁeld 


The Form toolbar appears 
when you create a form 
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Browsers display form objects differently, so test your form on all the browsers and 
platforms you plan to support. 


Note: If you publish pages containing forms using the Fixed Page Layout output option, the 
forms may not display properly in the browser and the form objects display warning 
icons in Page view. 


Naming Form Objects 


When you add objects to a form, you provide a name or argument for each object 
that is passed to the NetObjects Form Handler component or CGI script that 
processes responses. These names can be used to output or otherwise process the 
text typed in a ﬁeld, or the state of each check box, radio button, or combo box. 


If you’re using the Form Handler component to output responses, you must name 
each form object with a sequential number only, beginning with 1, and continuing 
with 2, 3, and so on because of the design of the component. Don’t use text 
characters or punctuation, as in 1-TextField. For Form Handler information, see 
“Submitting Responses as Plain Text” on page 403. 


In addition to names, you can also provide a value to be sent when a site visitor 
selects a check box, radio button, or item in a combo box. For example, a check box 
named Yellow with a value of Yes might be sent to a CGI script as Yellow=Yes, 
depending on the script. 


Actions you add with NetObjects Fusion can also use form object values to 
manipulate a site visitor’s response. See “Scripting Parameter Values” on page 366. 


If you’re using a CGI script, you might need to coordinate the names and values 
you enter with those used in the script. Each CGI script has its own naming 
conventions, but in general, names cannot include spaces or punctuation. Check 
with your server administrator or ISP for information. 


Adding a Single-Line Text Field 


A single-line text ﬁeld can accommodate just a few words, such as a name or phone 
number. After creating the form as described on page 392: 


Edit Field tool 


1. In Page view, select the Forms Edit Field tool from the Form toolbar. 


2. Draw a rectangle on the form. 


The Forms Edit Field Properties palette appears. 
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Adding Objects to a Form 


3. Set the Forms Edit Field properties. 


✦ 
Name. Type the name for this ﬁeld that’s passed to the CGI script processing 
the form. You may be able to choose any name or one may be required for 
this ﬁeld by the CGI script. 


If you’re using the Form Handler, use a number indicating the object’s order 
in the output text. 


✦ 
Text. Type text to appear in the ﬁeld by default. This text is submitted as the 
response if the site visitor doesn’t replace it. 


✦ 
Password ﬁeld. Select this option if the ﬁeld is for sensitive information like a 
password or credit card number. Characters site visitors type are submitted 
to the script, but depending on the browser, visitors see asterisks, bullets, or 
nothing at all as they type. 


This option does not create password protection to prevent site visitors from 
visiting certain pages. That level of protection can only be provided by 
scripts used by the form or by permission settings on the server itself. 


✦ 
Visible length. Enter a number to deﬁne the width of the text box by 
specifying the number of characters visible in the ﬁeld. 


✦ 
Max length. Enter a number to deﬁne how many characters site visitors can 
enter in the ﬁeld. When typing exceeds the ﬁeld’s visible width, text scrolls 
up to this number of characters. 


4. To add a label to the ﬁeld, use the Text tool on the Standard toolbar. 


Select the label and the ﬁeld and on the Multi-Object Palette, click Align Center 
to make sure these objects appear correctly in the browser. To make aligning 


Text ﬁeld width, measured in characters 


Maximum number of characters that can be 
entered in the ﬁeld 


Select to hide the site visitor’s typing 


Type text to appear in the ﬁeld by default 


Name passed to the script processing the form 
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labels and ﬁelds easier, include the ﬁeld and label in the same text box, or insert 
both objects in table cells. 


Adding a Multiple-Line Text Field 


To provide a place for long comments or descriptions, you can add a multiple-line 
text ﬁeld. Site visitors can type as much as they want, and text scrolls as necessary. 
After creating the form as described on page 392: 


Multi-Line tool 


1. In Page view, select the Forms Multi-Line tool from the Form toolbar. 


2. Draw a rectangle on the form. 


3. Set the Forms Multi-Line properties. 


✦ 
Name. Type the name for this ﬁeld that’s passed to the CGI script processing 
the form. 


If you’re using the Form Handler, use a number indicating the object’s order 
in the output text. 


✦ 
Text. Type text to appear in the ﬁeld by default. This text is submitted as the 
response if the site visitor doesn’t replace it. 


✦ 
Visible length. Enter a number to deﬁne the width of the text box by 
specifying the number of characters visible in the ﬁeld. 


✦ 
Visible height. Enter a number to deﬁne the number of lines visible in the 
ﬁeld. 


4. To label the ﬁeld, use the Text tool on the Standard toolbar. 


Type text to appear in the ﬁeld by default 


Name passed to the script processing the form 
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Adding Objects to a Form 


Adding Radio Buttons 


Use radio buttons when you want site visitors to choose one option from a group. 
Clicking one radio button deselects all others in its group. After creating the form as 
described on page 392: 


Radio Button tool 


1. In Page view, select the Radio Button tool from the Form toolbar. 


2. Draw a rectangle on the form. 


3. Set the Forms Radio Button properties. 


✦ 
Group name. Type the name for this group of buttons that’s passed to the CGI 
script processing the form. This should be the same for all buttons in the 
group. If you’re using the Form Handler, use a number indicating the 
buttons’ order in the output text. 


✦ 
Value sent. Type the value passed for the button if the site visitor selects it. If 
you’re using the Form Handler, and a visitor selects a button named Large in 
a group named 4, the output text might appear as 4=Large. 


✦ 
Default. Choose either Selected or Not selected to set the button’s initial 
state, which is returned as the response if the site visitor doesn’t change it. 
Remember that only one radio button in a group can be selected at a time 
and this only works if all buttons in the group have the same group name. 


4. To label each radio button, use the Text tool on the Standard toolbar. 


Value passed if this button is selected 


Name passed for the group to the script 
processing the form. This should be the same 
for all buttons in the group 
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Adding Check Boxes 


You can provide check boxes for making one or more selections from a group of 
options, or to turn a single option on or off. Unlike radio buttons, any number of 
boxes in a group can be selected at the same time. After creating the form as 
described on page 392: 


Checkbox tool 


1. In Page view, select the Forms Checkbox tool from the Form toolbar. 


2. Draw a rectangle on the form. 


3. Set the Forms Checkbox properties. 


✦ 
Name. Type the name for this check box that’s passed to the script 
processing the form. If you’re using the Form Handler, use a number 
indicating the box’s order in the output text. Each check box must have a 
separate name. 


✦ 
Value. Type the value passed for the box if the site visitor checks it. If you’re 
using the Form Handler, and a visitor checks a box named 6 that has the 
value Email, the output text might appear as 6=Email. If the site visitor 
doesn’t check it, no value is sent to the server. 


✦ 
Default. Select either Checked or Unchecked to set the box’s initial status, 
which is returned as the response if the site visitor doesn’t change it. 


4. To label each check box, use the Text tool on the Standard toolbar. 


Value that’s passed if this box is checked 


Name passed to the script processing the form 
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Adding Objects to a Form 


Adding a Combo Box 


If a long list of check boxes or radio buttons takes up too much space in your form, 
you can list options in a combo box. Use a scrolling list if you want site visitors to 
be able to select more than one option, which is a space-saving alternative to a 
group of check boxes. Or use a drop-down list for selecting only one option, which 
is an alternative to radio buttons. After creating the form as described on page 392: 


Combo Box tool 


1. In Page view, select the Forms Combo Box tool from the Form toolbar. 


2. Draw a rectangle on the form. 


3. Set the Forms Combo Box properties. 


✦ 
Name. Type the name for this combo box that’s passed to the script 
processing the form. If you’re using the Form Handler, use a number 
indicating the combo box’s order in the output text. 


✦ 
Type. Select whether you want a drop-down list that displays one item at a 
time, or a list box that displays several items in a scrolling list. 


✦ 
Visible height. For a list box, enter the number of visible lines in the box. 


✦ 
Allow multiple selections. For a list box, select this option if you want site 
visitors to be able to select more than one item in the list. 


Name passed to the script for the combo box 


Names and values passed for each item in the list 
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4. To add items to the combo box list, click the plus (+) button and, in the Enter 
Value dialog, type a name and the value passed to the script for the item. 


✦ 
Name. Type the name passed for this item, which is also the name that 
appears in the list. 


✦ 
Value. Type the value passed if the item is selected. 


✦ 
Selected by default. Check this option if you want this item initially selected. 
Unless you’re creating a list box and you select Allow multiple selections, 
only one item in the list can be selected. 


5. To label the list, use the Text tool on the Standard toolbar. 


To remove items from the list, select the item and click the minus (-) button. Use the 
arrow buttons to rearrange the order of items in the list. 


Adding Submit, Reset, and Custom Buttons 


After adding objects for collecting data from site visitors, you must add a Submit 
button to send the data to your Web server. You can also supply a Reset button so 
visitors can clear the form and start over. To determine how the server handles the 
information entered by the site visitors, you can use the NetObjects Fusion Form 
Handler or specify a custom CGI script. 


Note: If you’re using the Form Handler component to send form responses in an email or to a 
text ﬁle, create your Submit button as described in “Submitting Responses as Plain 
Text” on page 403. 


After creating the form as described on page 392: 


Forms Button tool 


1. In Page view, select the Forms Button tool from the Form toolbar. 


2. Draw a rectangle on the form. 


Name that appears in the list 


Value passed if this item is selected 
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Adding Objects to a Form 


3. Set the Forms Button properties. 


✦ 
Name. Use the name your CGI script references. 


✦ 
Text. Type the button label text in the ﬁeld. 


✦ 
Image. To use a picture as a label, select Image, click Browse, and choose an 
image ﬁle from the Picture File Open dialog. 


Note: When you use an image as the label for a form button, that button can only 
submit information. It cannot be used as a reset button. 


✦ 
Type. Choose a button type: 


✧ 
Submit creates a button that sends the site visitor’s responses to the Form 
Handler or CGI script on the server. 


✧ 
Reset creates a button that reverts to the form’s initial settings. 


✧ 
Button creates a custom button that runs the script you add using the 
HTML button. 


✦ 
HTML. Opens the Object HTML dialog so you can add a script that runs 
when site visitors click the custom button. See “Accessing an Object’s 
HTML” on page 461. 


The button label can be text or a picture 


Select Button to create a custom button 


Click here to attach a script deﬁning what a 
custom button does 
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Submitting Responses as Plain Text 


You can have responses submitted as plain text to a ﬁle on the Web server using the 
Form Handler component. When you use the Form Handler, you don’t have to 
provide your own CGI script, the Form Handler provides it for you. 


Note: Using the Form Handler component might require conﬁguration of your Web server. To 
ﬁnd out what’s required, see the components information at the Workbench link from 
www.netobjects.com/support. 


Submitting Data to a Text File 


To use the Form Handler component to copy site visitors’ responses to a text ﬁle on 
your Web server, use the component tool to create the form’s Submit button. After 
creating the form as described on page 392: 


Form Handler tool 


1. In Page view, select the Form Handler tool from the NetObjects Fusion 
Components toolbar, and draw a rectangle on the form. 


2. Set the Form Handler properties. 


✦ 
Button Name. Type a name for the button’s label, or accept Submit. 


✦ 
Publish to. From the drop-down list, choose the type of Web server you’re 
publishing to: Windows, Mac, UNIX, or Email. You must know the type of 
server as well as how the server is conﬁgured to handle CGI scripts. Ask 
your ISP or server administrator or check the Workbench link from 
www.netobjects.com/support. If you choose Email, see “Submitting Data in 
an Email” on page 405. 
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Submitting Responses as Plain Text 


✦ 
Success URL. Double-click this row and in the Link dialog, select the page to 
display when a visitor correctly completes the form. Click the Link button. 


✦ 
Error URL. Double-click this row and in the Link dialog, select the page to 
display when submission fails, for example, if the visitor doesn’t ﬁll in a 
required ﬁeld. 


✦ 
Output File. Type a name for the ﬁle you want responses copied to. Do not 
specify a path. 


✦ 
Perl Path for UNIX. If you’re publishing to a UNIX server, type the path to the 
Perl application on the server. Perl 5 is required on the server. 


✦ 
CGI-Bin Directory. Type the path to the directory on the Web server where the 
CGI scripts provided by Form Handler should be copied. This directory 
must be in the Publish to directory or lower in the directory hierarchy. 


✦ 
Abs. Storage Directory (Windows only) or Storage Directory. Type the path to the 
directory on the server where you want to put the output ﬁle. 


✦ 
Required ﬁelds. For each ﬁeld, choose whether a response is required (True) 
or not (False) for a submission to be successful. If you mark a ﬁeld True and 
visitors don’t ﬁll it in, they see the Error URL when they submit the form. 


The required ﬁeld option is not displayed if your ﬁelds are not named as 
sequential numbers. If any object in your form isn’t listed in the Form 
Handler Properties palette, you might have named it incorrectly. See 
“Naming Form Objects” on page 395. 


Note: You must conﬁgure all properties listed in the Form Handler or the script will 
not run. If your form ﬁelds are not named correctly, the script will also fail. 
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Submitting Data in an Email 


You can also use the NetObjects Form Handler component to copy site visitors’ 
responses into an email to any address you specify. 


Note: This feature is not supported under all conﬁgurations of Internet Explorer. To ﬁnd out 
what’s required, see components information at the Workbench link from 
www.netobjects.com/support. 


Form Handler tool 


1. In Page view, select the Form Handler tool from the Component toolbar, and 
draw a rectangle on the form for the Submit button. 


2. On the Form Handler Properties palette, click the Publish to option and select 
Email. 


3. Enter the email address, and relabel the button if you want. 


✦ 
Button Name. To change the button’s label, click in the Button Name row and 
type a name in the Form Handler text ﬁeld. 


✦ 
Publish to. Choose Email from the drop-down list if you have not already 
done so. 


✦ 
Email. Click and type the email address to which responses will be sent. 


Because of the way the email feature works, you cannot have required ﬁelds in the 
email option. If you want both features, you must use a CGI script that can send 
email. 
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Processing Data with a CGI Script 


Processing Data with a CGI Script 


To process form responses other than by outputting text using the Form Handler 
component, use a custom CGI script. A CGI script is a program that controls a 
program on your Web server. Using a CGI script, you can format responses for a 
particular application, summarize them on a page that’s returned to the site visitor, 
or do practically anything else with the data. 


Note: Not all administrators let you install CGI scripts on their servers. Some provide standard 
CGI scripts for you to use, and a few don’t support CGI at all. 


1. In Page view, click anywhere in the form except on a form object. 


2. On the Properties palette, click the Settings button. 


For a text box form, look for the Settings button on the Text Box tab. For other 
forms, look on the General tab. 


The Form Settings dialog appears. 


3. Specify: 


✦ 
Form name. Type an arbitrary name for the form. This is required by some 
browsers. 


✦ 
Action. Type the URL to the CGI script on a server. If the CGI script is 
already on the server, enter its URL here; for example: 


http://www.host.com/myaccount/fusionproject/assets/cgi-bin/myscript.cgi 
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Note: Normally, NetObjects Fusion publishes custom CGI scripts to the cgi-bin 
directory speciﬁed in Publish view. If your server’s conﬁguration requires 
publishing scripts somewhere else, you must use the Alias tab of the Deﬁne 
Server dialog in Publish view to specify that location in the CGI script ﬁeld. 
This applies only to custom CGI scripts, not to the Form Handler. See “Creating 
Aliased Folders and Setting the CGI-Bin Directory” on page 512. 


If the CGI script isn’t already on the server but needs to be published along 
with your site’s assets, click Browse and select the script ﬁle to be published 
from the Open dialog. This ﬁle appears in the Action ﬁeld. NetObjects 
Fusion adds the ﬁle as an asset and puts it in the CGI bin directory. 


When visitors click Submit, the server executes the CGI script at this URL. 


Note: If the URL doesn’t point to your server’s cgi-bin folder, you must customize 
your site’s published directory structure by renaming cgi-bin appropriately. 
See “Customizing Your Site’s Directory Structure” on page 508. 


✦ 
Method. Choose a method for sending form data to the Web server: 


✧ 
Post, which is the preferred method, sends data as a standard stream of 
name=value pairs, separated by an ampersand (&). 


✧ 
Get sends the values of the form variables as part of the URL. Use Get 
with care, as some servers truncate data sent using this method. 


Often, the method you use is determined by the scripts you use. Check your 
script’s documentation for information. 


✦ 
Encoding type. If your server requires data to be encoded in a particular 
format, such as MIME or BinHex, type the format here. 


4. Click OK. 
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Adding Hidden Fields 


If a CGI script is processing your form, you probably need to use hidden ﬁelds to 
pass additional information to it, such as which ﬁelds must be ﬁlled in to display the 
success page or where to return data once it’s processed. Site visitors don’t see 
these ﬁelds, but the values are submitted to the script with form responses. 


1. In Page view, click anywhere in the form except on a form object. 


2. On the Properties palette, click the Settings button. 


For a text box form, look for the Settings button on the Text Box tab. For other 
forms, look on the General tab. 


The Form Settings dialog appears. 


3. Add names and values for each hidden ﬁeld in the Form Settings dialog. 


✦ To add a ﬁeld, click the plus (+) button, then enter a name and value for the 
ﬁeld in the Enter Value dialog. 


✦ To remove a ﬁeld, select it and click the minus (–) button. 


✦ To reorder ﬁelds in the list and deﬁne their order in the submitted data, select 
a ﬁeld and click the up or down arrow. 


4. Click OK. 


If you’re using the Form Handler component to process a form, don’t enter hidden 
ﬁelds yourself. The Form Handler enters the ﬁelds it needs. 
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Using NetObjects Fusion 
Components 
26 


Components are pre-built mini-applications that add interactivity to your site 
without custom programming or scripting. Publish components and Page 
components are available in NetObjects Fusion 7.5. The component’s type dictates 
where it appears within NetObjects Fusion. 


NetObjects Fusion components are installed when you install NetObjects Fusion. 
You can also download third-party components, such as NetObjects Fusion 
Connector for Macromedia ColdFusion and NetObjects Fusion Components for 
IBM HotMedia. If you are a software developer and want to create your own 
NetObjects Fusion Components, sometimes called NFXes, you can use the 
NetObjects Component Development Kit (CDK). For information, visit 
www.netobjects.com. 


Note: You cannot preview components in NetObjects Fusion. When you add a component to a 
page and preview, you see a placeholder graphic. To see how the component works, 
you must publish the site locally or remotely. 


This chapter explains: 


✦ Adding NetObjects Fusion Components to a page 


✦ Setting component properties 
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About Components 


About Components 


You can use Publish components and Page components in NetObjects Fusion. The 
component’s type dictates where it appears within NetObjects Fusion. 


✦ Publish components are used to post-process the HTML generated by 
NetObjects Fusion or to change NetObjects Fusion’s FTP capabilities. See 
“Publishing Components” on page 504. 


✦ Page components appear on toolbars in Page view. You use the tools to place 
components on your pages. 


Note: To add copies of the same component to a site, you must place a new 
component each time. Copying and pasting components can lead to site 
corruption. 


NetObjects Fusion components are automatically available when you install 
NetObjects Fusion. These 11 components appear on the NetObjects Fusion 
Components toolbar in Page view. Ten of these Page components are discussed in 
this chapter; the Form Handler component is discussed in “Submitting Responses 
as Plain Text” on page 403. 


In addition, you can download third-party components, such as NetObjects Fusion 
Connector for Macromedia ColdFusion and NetObjects Fusion Components for 
IBM HotMedia. Depending on their type, third-party components are installed in 
the appropriate place in NetObjects Fusion. Additional component toolbars become 
available in Page view when you install a third-party Page component. For 
information about third-party components, visit Online view. 


Adding a Rotating Ad Banner 


You can use the Ad Banner component to display a series of images within a 
banner. You determine which images display, associate a transition with each 
image, set the amount of time each image is displayed, and specify a URL linked to 
each image. 


NetObjects Fusion supports .gif and .jpg images in components. See “Choosing an 
Image Format” on page 182. 
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To add an Ad Banner: 


Ad Banner tool 


1. In Page view, select the Ad Banner tool from the NetObjects Fusion 
Components toolbar. 


2. Click on the page to indicate the Ad Banner’s location. 


An Ad Banner placeholder and the Ad Banner Properties palette appear. 


3. Specify the Banner Type. 


✦ 
Image Size. The Ad Banner is the same size as the images you select. 


✦ 
Standard Banner Size. Click Banner Size and choose from the drop-down list. 


✦ 
Custom. Enter a width and height for the Ad Banner. 


4. Enable or disable Automatic Resizing. 


If Automatic Resizing is disabled, you must choose images that are the same 
size. If Automatic Resizing is enabled, Ad Banner resizes the larger images to 
match the smallest image. For best results, use images that are the same size. 


5. Set Pause Time to control how long each image is displayed. 


6. Enter the total number of images you want to use. You can use from 1 to 50 
images. 


7. To select an image, double-click the Image row, select the image from the 
Picture File Open dialog, and click Open. 


8. Double-click the URL for Image row and in the Link dialog select a type of link 
for the image. See “Creating Links” on page 284. 


9. Specify the link information and click Link. 
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Adding DynaButtons 


10. Click the Transition row and select a transition from the drop-down list. You can 
choose: 


✦ 
Column to draw increasingly larger columns of the new image onto the old 
image. The new image appears to slide in from behind the old image. 


✦ 
Fade to change one image into another by drawing a set of random pixels 
from the new image onto the old image. 


✦ 
Rotate to make it appear as though one image is rotating upward from below 
the other image. 


✦ 
Smash to drop the new image onto the old one. The old image appears to 
crumble under the weight of the new image. 


✦ 
Tear to make it appear as though the old image is ripped away to reveal the 
new image. 


✦ 
Unroll to place the new image on top of the old image and unroll it. 


When the site displays in the browser, the sequence begins with a random image 
and its associated transition. 


11. Repeat steps 7 through 10 for each image you want to rotate into the Ad Banner. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Adding DynaButtons 


DynaButtons are Java buttons that link to another page on your site, other sites, or a 
speciﬁc ﬁle. You can place DynaButtons anywhere on your pages and assign up to 
20 buttons to a DynaButton bar. In addition, you can assign up to 20 sub-buttons to 
each DynaButton. You can create sub-buttons for navigating from a main page to 
pages at a lower level. 


When you publish the site, each button appears in the browser in the primary button 
style selected for the site and displays the name of the page to which it is linked. 
You cannot assign custom images to DynaButtons. The button’s style is determined 
by your SiteStyle. To use custom images for buttons, use the Picture Rollover tool. 


Because a DynaButton is an active link, the button appears active when a site visitor 
moves the mouse pointer over the DynaButton or clicks the button. The site visitor 
can click the DynaButton to go to the appropriate link. 
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To add DynaButtons and set properties: 


DynaButtons tool 


1. In Page view, select the DynaButtons tool from the NetObjects Fusion 
Components toolbar. 


2. Click on the page to indicate the DynaButtons’ location. 


A DynaButtons placeholder and the DynaButtons Properties palette appear. 


3. Select the buttons’ orientation—vertical or horizontal—from the drop-down 
list. 


4. Click the Number of Buttons row, specify how many buttons you want, and 
click the check mark. 


5. Double-click the number row, such as Button 1. 


The Link dialog appears. You can link this button to another page, ﬁle, smart 
link, or external link. See “Creating Links” on page 284. 


6. Specify the link information and click Link. 


The details of the link appear in the right column of the button row. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Adding Sub-Buttons 


If a DynaButton contains sub-buttons, the sub-buttons appear when a site visitor 
clicks the DynaButton. The sub-button shows information about the link associated 
with the button. For example, if a sub-button is linked to an external link, the sub- 
button displays the asset name for the external link. 
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Adding DynaButtons 


To add sub-buttons and set the properties: 


1. In Page view, create a DynaButton as described in “Adding DynaButtons” on 
page 412. 


2. Double-click the Use Sub-Buttons row. 


Yes appears in the right column and NetObjects Fusion adds a Number 
Sub-Buttons row under the Use Sub-Buttons row. 


3. To specify the number of sub-buttons, select the Number Sub-Buttons row, 
enter the number of buttons, and click the check mark. 


The limit is 20 sub-buttons. The appropriate number of sub-button rows appear, 
numbered in sequential order. 


4. To deﬁne the link for each sub-button, double-click the appropriate 
sub-button row, such as Sub-Button 1,2. The ﬁrst number, in this case the 1, 
identiﬁes the button for which the sub-button was created, and the second 
number is the number of the current sub-button. 


The Link dialog appears. See “Creating Links” on page 284. 


5. Specify the link information and click Link. 


6. Repeat steps 4 and 5 to create and deﬁne each sub-button. 
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Loading Pictures onto Your Site 


Use the NetObjects Picture Loader Component to load an image from a site other 
than your own. You can use this to place advertising banners if the banners are 
located on a server other than your Web server. 


To load a picture from an external source: 


Picture Loader tool 


1. In Page view, select the Picture Loader tool from the NetObjects Fusion 
Components toolbar. 


2. Draw a box on the page to indicate where you want to place the picture. 


A placeholder and the Picture Loader Properties palette appear. 


3. Click the Image URL row and type the URL where the picture is located. 


Be sure to type the complete URL. 


4. Click the check mark. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 
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Adding a Go Menu 


Adding a Go Menu 


You can use the Go Menu component to easily create a drop-down navigation 
menu, with each menu item corresponding to a single page in the site. 


Go Menu tool 


1. In Page view, select the Go Menu tool from the NetObjects Fusion Components 
toolbar. 


2. Draw a box on the page where you want to place the Go Menu. 


The Go Menu dialog appears. 


3. On the Menu Items tab, select a link type from the drop-down list and set up a 
link to the items you want to include on the Go Menu. See “Creating Links” on 
page 284. 


4. From the list on the left, select the speciﬁc items you want to include on the Go 
menu and click the right arrow to move them into the Link column. You can 
include up to 50 items on the menu. 


✦ To change the way an item is listed on the menu, double-click it in the Menu 
Item Name column and type a new name. 


✦ Select an item and click the Move up or Move down button to change the 
order of items on the menu. 


✦ To delete an item, select it and click Delete. 
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5. Click the Button Format tab. 


6. Select one of the three formats. An example of each format is shown on the left. 


7. Click OK. 


8. To change the items included on the Go Menu or the button format, use the Go 
Menu Properties palette. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 
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Adding Pictures That Roll Over 


Adding Pictures That Roll Over 


You can use the Picture Rollover component to create JavaScript rollovers for any 
image on your site. Because this component uses JavaScript, the colors of your 
images are not compromised. 


To view a rollover picture, site visitors must use Netscape Navigator 3.x and up or 
Microsoft Internet Explorer 3.x and up. 


To add pictures that roll over: 


Rollover Picture tool 


1. In Page view, select the Picture Rollover tool from the NetObjects Fusion 
Components toolbar. 


2. Draw a box on the page where you want to locate the pictures. 


A picture placeholder and the Picture Rollover Properties palette appear. 


3. To specify the ﬁrst image to display, double-click the Initial image row, select 
the image from the Picture File Open dialog, and click Open. 
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The Picture Rollover Properties palette changes and displays two new rows— 
Mouse over image and Mouse out image. 


4. To specify the image to display when the mouse pointer moves over the image, 
double-click the Mouse over image row, select the image from the Picture File 
Open dialog, and click Open. 


Note: The images you select for rollover pictures are resized to the size of the ﬁrst 
image you select. For best results, use images that are the same size. 


5. To specify which image to display when the site visitor moves the mouse 
pointer off the picture, double-click the Mouse out image row, select the image 
from the Picture File Open dialog, and click Open. 


6. To link the image to a speciﬁc URL, double-click the Link URL row. 


The Link dialog appears. Because the entire image is treated as one object, you 
can link it to another page, ﬁle, smart link, or external link, such as another site. 
See “Creating Links” on page 284. 


7. Specify the link information and click Link. 


The details of the link appear in the right column of the button row. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 
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Adding Rotating Pictures 


Adding Rotating Pictures 


You can use the Rotating Picture component to display different pictures in 
succession in the same place on the page. For example, you could rotate among 
several images that advertise new products or current sale items. 


To add a rotating picture, you specify the image to display and the number of 
seconds to pause before displaying the next picture in the sequence. You can also 
assign a link to each picture. 


NetObjects Fusion supports .gif and .jpg formats in components. See “Choosing an 
Image Format” on page 182. 


To add pictures that rotate and set their properties: 


Rotating Picture tool 


1. In Page view, select the Rotating Picture tool from the NetObjects Fusion 
Components toolbar. 


2. Draw a box on the page to indicate where you want to place the picture. 


A rotating picture placeholder and the Rotating Picture Properties palette 
appear. 


3. To set the number of seconds each picture is displayed before moving to the 
next one, click the Pause Time (Seconds) row, specify the number of seconds, 
and click the check mark. 


4. To set the number of different images to display in the rotating picture, double- 
click the Number of Images row, specify the number of images, and click the 
check mark. 
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You can display up to 50 images for your rotating pictures. An Image row and 
URL for Image row for each image you specify appears. 


Note: The images you select for rotating pictures are resized to the size of the ﬁrst 
image you select. For best results, use images that are the same size. 


5. Double-click an Image row, select an image ﬁle from the Picture File Open 
dialog, and click Open. 


6. To create a link for this image, double-click the image’s URL for Image row, 
then in the Link dialog select the type of link. See “Creating Links” on 
page 284. 


7. Specify the link information and click Link. 


8. Repeat steps 5 through 7 for each image. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Directing Visitors to a Browser-Speciﬁc Page 


The Screen Door component detects the visitor’s browser type and redirects the 
visitor to a page targeted for that speciﬁc browser. You can choose to direct a visitor 
to Netscape Navigator 4.x, Microsoft Internet Explorer 4.0 and up, Netscape 
Navigator 3.0, or Microsoft Internet Explorer 3.0. 


The Screen Door is not visible on the page. You might want to include information 
on the page to let site visitors know they are being directed to another page. 


You can only include one Screen Door per page. 


Screen Door tool 


1. In Page view, select the Screen Door tool from the NetObjects Fusion 
Components toolbar. 


2. Draw a box in the Layout area of the page where you want to place the Screen 
Door. This component does not work when placed in a MasterBorder. 
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Directing Visitors to a Browser-Specific Page 


A Screen Door placeholder and the Screen Door Properties palette appear. 


3. Choose a Method. 


✦ 
JavaScript (client) works for all browsers except the few that do not support 
the META tag. 


✦ 
ASP (server) requires that your Web server is ASP compliant. 


If you are publishing to an ASP server, make sure your server administrator 
updates the browsecap.ini ﬁle each time there is a browser update. This ﬁle 
allows the server to recognize the new version of the browser, which in turn 
allows the Screen Door component to identify the browser correctly. If 
browsecap.ini is not updated, the Screen Door will not know where to send a site 
visitor. For an updated version of browsecap.ini, go to www. microsoft.com. 


4. Choose to pause or not pause before redirecting a site visitor. If you set Pause to 
Yes, enter the number of seconds you want to pause. 


5. Set up appropriate links for the default page and for each individual browser 
type. See “Creating Links” on page 284. 
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Adding a Site Map Button 


Site Mapper is a Java navigation applet that site visitors can use to create an 
interactive map of a site. If your site is large, Site Mapper simpliﬁes navigation by 
providing a detailed view of the site’s levels. Using the site map, visitors can jump 
directly from page to page without using the page navigation controls. 


The Site Map button provides three ways for visitors to view the site: 


✦ By structure, similar to Site view in NetObjects Fusion. 


✦ In an outline view 


✦ By searching for certain words 


To add a Site Map button and set its properties: 


1. In Page view, display the page where you want to add the Site Mapper 
component. The Site Mapper does not show pages above this page in the site 
hierarchy. 


If you place the Site Mapper component in a MasterBorder, you can place it on 
any page using that MasterBorder. It is recommended, however, that you place a 
Site Mapper component in the Layout of a single page in the site. 


Site Mapper tool 


2. Select the Site Mapper tool from the NetObjects Fusion Components toolbar. 


3. Draw a box on the page to indicate the location of the Site Map button. 


Site visitors can view the 
site three ways. This map 
shows the structure 


Select the number of levels 
to display 


The size of each node 
adjusts so the entire tree 
ﬁts in the window. With a 
large site, the nodes may be 
too small to use 


When site visitors move 
the pointer over a page, 
the page name appears 
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Using Ticker Tape 


The Site Map button and the Site Mapper Properties palette appear. 


4. To change the image displayed for the Site Map button, double-click the Image 
row, then select the image ﬁle you want from the Picture File Open dialog. 


The selected image appears on the page. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Using Ticker Tape 


If you want to announce a special promotion or event on your site, you can use the 
Ticker Tape component to add a scrolling message to a page and set the colors and 
speed used to display the message. 


To add a Ticker Tape display and set its properties: 


Ticker Tape tool 


1. In Page view, select the Ticker Tape tool from the NetObjects Fusion 
Components toolbar. 


2. Draw a rectangle to indicate the location and size of the Ticker Tape display. 
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The Ticker Tape placeholder and the Ticker Tape Properties palette appear. 


3. To display multiple messages in the Ticker Tape display, click the Number of 
Messages row, enter the number, and click the check mark. 


You can specify up to 50 messages. A new Text for Message and URL for 
Message row appears for each message you speciﬁed. 


4. Click the Text for Message row and type the message in the Ticker Tape text 
entry ﬁeld. Click the check mark. 


5. Double-click the URL for Message row and in the Link dialog select a type of 
link for the message. See “Creating Links” on page 284. 


6. Specify the link information for this message and click Link. 


7. Repeat steps 4 through 6 for each message in the Ticker Tape display. 


8. Click the Speed row, and specify the scrolling speed (1 to 50) of the message. 


Specify a higher number to make the message scroll faster; a lower number to 
make the message scroll slower. 


9. To set the frame, background, and LED colors, click the appropriate row, then 
select the color you want from the drop-down list. 


✦ Frame Color determines the border color of the Ticker Tape display. The 
default is gray. 


✦ Background Color determines the background color of the Ticker Tape 
display. The default is black. 


✦ LED Color determines the color of the message text. The default is green. 
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Adding Time Based Pictures 


10. Click the LED Type row and select a style for the LED text. 


✦ 
0 is square dots 


✦ 
1 is circular dots 


✦ 
2 is regular text 


11. Click the LED/Font Size row and select a size for the message text. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 


Adding Time Based Pictures 


You can use the Time Based Picture component to display different pictures at the 
same location on your page at the time of day you specify. You select the image to 
display and specify the hour at which to display it. The browser automatically 
displays the picture at the speciﬁed time. The picture remains on the page until it is 
time for the next picture to be displayed. 


NetObjects Fusion supports .gif and .jpg formats in components. See “Choosing an 
Image Format” on page 182. 


To add time based pictures and set the properties: 


Time Based Picture tool 


1. In Page view, select the Time Based Picture tool from the NetObjects Fusion 
Components toolbar. 


2. Draw a box on the page where you want to locate the picture. 


A picture placeholder and the Time Based Picture Properties palette appear. 


The number of 
images is 3 by 
default 
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3. Click the Number of Images row and specify the number of images you want to 
rotate. 


You can use up to 24 images. NetObjects Fusion adds an Image, Start Time for 
Image, and URL for Image row for each image. 


4. To select an image, double-click the Image row, select the image from the 
Picture File Open dialog, and click Open. 


5. To create a link to the image, double-click the URL for Image row and in the 
Link dialog select a type of link for the image. See “Creating Links” on 
page 284. 


6. Click the Start Time for Image row and select a starting time from the drop- 
down list. 


The start time determines when the image is displayed on your site. You can 
select one-hour increments from 12 a.m. to 12 p.m. The image is displayed until 
the next image’s starting time. Be sure images have consecutive starting times. 


7. Repeat steps 4 through 6 for each image you add. 


You can add an action to an object using the Actions tab. See Chapter 23, “Building 
Dynamic Pages.” 
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Adding Time Based Pictures 
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Data Publishing 
27 


NetObjects Fusion makes it easy to publish information such as employee 
directories, product and service catalogs, and event schedules. You can enter, 
manage, and store this information as records either in your NetObjects Fusion site, 
or in an external application such as a database or spreadsheet. 


To publish the data, you specify its source and create a layout for the pages that will 
display it. NetObjects Fusion uses your Layout to create a separate page for each 
record, and can automatically provide site visitors with buttons to navigate between 
them. 


This chapter describes how to publish data using NetObjects Fusion, including: 


✦ Static and dynamic data publishing 


✦ Creating a data object 


✦ Storing data internally 


✦ Using data stored externally 


✦ Creating a data list 


✦ Creating stacked pages 
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Static and Dynamic Data Publishing 


Static and Dynamic Data Publishing 


NetObjects Fusion supports two kinds of data publishing: static and dynamic. 


✦ Static data publishing takes any kind of data—text, pictures, multimedia ﬁles, 
and so on—from a database or spreadsheet. NetObjects Fusion publishes the 
data on your site, where it remains unchanged—static—until the source data is 
changed and the site is re-published. Static data publishing, which is the focus 
of this chapter, uses data objects that derive data from internal or external 
sources. 


✦ Dynamic data publishing makes it possible to refresh the data each time a 
visitor goes to the site. When the browser requests the data, it is assembled on 
the spot; it does not depend on re-publishing the site. 


Dynamic data publishing requires third-party components. Third-party 
publishers regularly release new components for NetObjects Fusion. For the 
latest information, visit Online view. 


Storing Data with NetObjects Fusion 


Using the data publishing capabilities of NetObjects Fusion, you can store text and 
pictures in a database internal to your site, or import data from external sources 
such as Microsoft Excel or Access using an ODBC data source connection. In both 
cases, NetObjects Fusion publishes your data in standard HTML pages. This makes 
it easy to add listings, such as product and service catalogs, employee directories, 
and event schedules to your site. 


You use the following objects when you publish data in NetObjects Fusion: 


✦ 
Data objects. A data object is a collection of data ﬁelds that deﬁne what data will 
be published. Creating a data object is the essential ﬁrst step in adding internal 
or external data to your site. The data object becomes an asset of your site. 
When you reference records internally, you must specify the data ﬁelds you 
want to store. When you store records from external data, NetObjects Fusion 
includes all ﬁelds available in the source. 


✦ 
Data ﬁelds. Deﬁned in the data object, data ﬁelds appear on stacked pages and 
are the containers for the data in your site. You can arrange and label data ﬁelds; 
the arrangement appears on all stacked pages. 


✦ 
Data lists. The data list appears on the parent page of the stacked pages that 
contain the actual data. The data list functions as a table of contents for the 
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internal or external data in your site. You select the ﬁelds you want to display as 
column headers in the list. The ﬁeld data from either the internal or external 
source populates the data list when you publish. 


✦ 
Stacked pages. Each record in your database appears on a separate stacked page 
below the page containing the data list. Stacked pages are not siblings of each 
other, but instead are iterations of the same page, containing the ﬁelds deﬁned in 
your data object. 


The following illustration shows the relationship of these objects for internal and 
external databases. 


For example, you could publish a backpack catalog on your site with a record for 
each backpack. Each row in the data list lets the site visitor navigate to the stacked 
page that contains the corresponding backpack’s description, photo, and price. 


To create the backpack catalog, your ﬁrst step is to create a backpack data object. 
You can deﬁne a data object once and use it in different ﬁltered data lists. For 
example, you can create one data list of all the backpacks in your database. With the 
same data object, you can create additional data lists of internal frame backpacks, 
external frame backpacks, frameless backpacks, and so on. 
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Publishing Data 


If you create a data object from an external source—for example, from a Microsoft 
Access database—and then update or change the external source, you must 
republish the site to update the data. For example, suppose your backpack data 
object referenced 50 records originally and the external database is increased with 
25 new records. After you republish your site, the data object references 75 records, 
the backpack data list contains 75 rows, and there are 75 stacked pages. 


After you create a data list on a page, NetObjects Fusion generates the ﬁrst stacked 
page. You create the initial Layout of how all stacked pages look on the ﬁrst stacked 
page. When you create the Layout of the ﬁrst stacked page, the remaining stacked 
pages automatically inherit the same Layout. Changes you make in the Layout in 
any one stacked page affect the Layout of all stacked pages in that set. 


The following illustration shows how the data list page and its child stacked pages 
appear in Site view. 


Publishing Data 


In general, when you work with data publishing, you follow this process: 


1. Create a data object. 


2. Create a data list. 


3. Design a set of stacked pages. 


When you create a data list, you create the stacked page for the data object. On this 
stacked page you create the Layout to be used for all the pages in the stack, 
including the ﬁeld data you want to display on the page. 


✦ If you are storing data internally, you enter the ﬁeld data on the stacked page 
itself. 


✦ If you are using an external source, the ﬁeld data is drawn from the external 
database, spreadsheet, or ASCII text ﬁle. 


Data list page 


Stacked pages 


NOF7.5UG~1.BOO Page 432 Thursday, January 21, 1904 11:14 PM 


Chapter 27 
Data Publishing 


433 


When you use the Data List tool in Page view, you can perform all three tasks 
within the Data Publishing dialog. 


Creating a Data Object 


You can create two types of data objects: 


✦ 
Internal data objects reference simple text, formatted text, and picture data ﬁelds 
stored or placed within your site. 


✦ 
External data objects import fields from a data ﬁeld created in a program other 
than NetObjects Fusion. External data sources include external databases, 
spreadsheets, and ASCII text ﬁles. Importing external data takes a single table 
from a database or a single worksheet from a program such as Microsoft Excel; 
it does not import the entire database. Use external data if your database is 
maintained by others who do not use NetObjects Fusion, if you have large 
quantities of data, or if the data is frequently updated. 


The tools for creating the two data object types appear on the Data tools ﬂyout 
on the Advanced toolbar. Use the New External Data Source tool to create a data 
object for external data; use the Data List tool to create a data object for internal 
data. After you create an internal data object, use the Data Field tool to add data 
ﬁelds to the stacked pages. 


Create or select a data object 


Choose options for the data list 


Choose options for stacked pages 


Click OK to create the data list and 
stacked pages 
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Creating a Data Object 


Creating a Data Object for Internal Data 


Internal data is records and ﬁelds stored within your site. You enter internal data 
directly into a stacked page by typing text or numbers and by placing pictures. 


You can create a data object in Page view or in Assets view. If you create a data 
object in Page view, you can immediately create stacked pages and start entering 
data. If you create a data object in Assets view, you must return to Page view to 
create a data list and stacked pages. 


To create a new internal data object: 


Data List tool 


1. Display the Data Object dialog: 


✦ In Page view, select the Data List tool from the Advanced toolbar, and draw 
a rectangle on the page. In the Data Publishing dialog, click the New button. 


New Asset 


✦ If you are in Assets view, click the Data Objects tab and then click the New 
Asset button on the control bar. 


New External Data Source tool 
Data List tool 


Data Field tool (only available on stacked pages) 
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2. Select Internal and enter a name for the data object and comments about it. 


NetObjects Fusion uses the data object name in the list of data objects in the 
Data Publishing dialog and in Assets view. 


3. Click the plus (+) button to add a ﬁeld. Fields deﬁne the kind of data you can 
enter. 


The Data Field dialog appears. 


4. Type the ﬁeld name and select a data type for the ﬁeld. 


✦ 
Formatted text. Characters in these ﬁelds can be formatted individually. 
Formatted text ﬁelds can contain paragraph and line breaks, and can exceed 
255 characters. You cannot sort on formatted text ﬁelds. 


✦ 
Simple text. All characters in these ﬁelds share the same formatting 
characteristics. Simple text ﬁelds cannot contain paragraph or line breaks, 
and cannot exceed 255 characters. You can sort on simple text ﬁelds. 


✦ 
Image ﬁle. These ﬁelds can contain an image in one of these formats: .bmp, 
.gif (animated, embedded, interlaced), .jpg, .pct, .pcx, .png, .psd, .tga, or .tif. 
You can sort on image ﬁle ﬁelds. NetObjects Fusion uses the ﬁle names to 
sort the image ﬁles. 


Note: Carefully plan the ﬁelds you deﬁne within an internal data object. After you 
click OK in the Data Object dialog, you cannot delete the ﬁeld from the data 
object or change the data ﬁeld type. 


5. Click OK. 


6. Repeat steps 3, 4, and 5 to add ﬁelds. 


7. When you are done, click OK in the Data Object dialog. 
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Creating a Data Object 


The data object is now an asset of your site, and you can continue as follows: 


✦ If you’re working in Page view, the Data Publishing dialog is still open. You can 
select ﬁelds and format the data list as described in “Creating a Data List” on 
page 438, and lay out your stacked pages as described in “Creating Stacked 
Pages” on page 441. 


Data List tool 


✦ If you’re in Assets view, go to Page view, select the Data List tool from the 
Advanced toolbar, and draw a rectangle on the page. In the Data Publishing 
dialog, select the newly created data object from the drop-down list. Select 
ﬁelds and format the data list as described in “Creating a Data List” on 
page 438, and lay out your stacked pages as described in “Creating Stacked 
Pages” on page 441. 


Changing an Internal Data Field Name 


1. Go to Assets view. 


2. Click the Data Objects tab. 


3. Double-click the data object name. 


The Data Object dialog appears. 


4. In the Fields list, double-click the name of the ﬁeld you want to rename. 


The Data Field dialog appears. 


5. Type a new name in the Name ﬁeld and click OK. 


6. Click OK. 


Creating a Data Object for External Data 


External data exists in local desktop databases or in ODBC data sources. Open Data 
Base Connectivity (ODBC) drivers draw data from Structured Query Language (SQL) 
data sources, such as Oracle and Sybase data ﬁles. They also support Microsoft 
Excel, Microsoft Access, delimited text ﬁles, and others. 


NetObjects Fusion automatically imports all the ﬁelds available in the external 
database ﬁle. If a simple text ﬁeld contains a valid path to an image ﬁle, NetObjects 
Fusion asks if you want to make the ﬁeld an image ﬁeld. Before you add an external 
data object, make sure you have all the necessary ﬁelds. You cannot add ﬁelds once 
you create the external data object. 
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Note: NetObjects Fusion Connector for Macromedia ColdFusion and NetObjects Fusion 
Connector for Microsoft Active Server Pages support dynamic data publishing. Visit 
Online view for information about these connectors. 


To create a data object from a SQL data source: 


1. Display the Select Data Source dialog: 


New External Data Source 
tool 


✦ In Page view, select the New External Data Source tool from the Advanced 
Tools toolbar, and draw a rectangle on the page. 


New Asset 


✦ If you are in Assets view, click the Data Objects tab, and then click the New 
Asset button on the control bar. The Data Object dialog appears. Select 
External and then click the Source button. 


The Select Data Source dialog appears. 


2. You can select an existing data source or create a new data source. 


To create a new data source, click New in the Select Data Source dialog and 
follow the steps in the Windows Create New Data Source wizard. 


To select an existing ODBC source on your system, you can use the File Data 
Source tab or the Machine Data Source tab: 


✦ 
File Data Source. Select from the list of data sources and click OK. 


✦ 
Machine Data Source. Select from the Data Source Name list and click OK. 


Depending on the data source type you choose, the Select Workbook or Select 
Database dialog appears. 


3. Follow these steps: 


✦ Select a ﬁle in the dialog and click OK. 


✦ If the source refers to a multiple-ﬁle database or a spreadsheet with multiple 
tabs, the Select dialog appears. Select the ﬁle or tab and click OK. 


NetObjects Fusion creates the data object, gives it the name of the selected 
ﬁle or tab, and imports its ﬁelds as simple text ﬁelds. 


If a simple text ﬁeld contains a valid path to an image ﬁle, you can choose to make 
it a text ﬁeld or an image ﬁeld. 
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Creating a Data List 


The data object is now an asset of your site, and you can continue as follows: 


✦ If you’re working in Page view, the Data Publishing dialog is still open. You can 
select ﬁelds and format the data list as described in “Creating a Data List” on 
page 438, and lay out your stacked pages as described in “Creating Stacked 
Pages” on page 441. 


Data List tool 


✦ If you’re in Assets view, go to Page view, select the Data List tool from the 
Advanced toolbar, and draw a rectangle on the page. In the Data Publishing 
dialog, select the newly created data object from the drop-down list. Select 
ﬁelds and format the data list as described in “Creating a Data List” on 
page 438, and lay out your stacked pages as described in “Creating Stacked 
Pages” on page 441. 


Creating a Data List 


Once you create a data object, you can create a data list on any page. You create a 
data list and a set of stacked pages at the same time. NetObjects Fusion 
automatically includes linked data list icons in the ﬁrst column in the data list. The 
data list thus acts as a table of contents—each row contains data for, and is linked 
to, a single stacked page. 


To create a data list: 


1. In Page view, display the page on which you want to place the data list. 


Data List tool 


2. Select the Data List tool from the Advanced toolbar and draw a rectangle in the 
Layout area. 


The Data Publishing dialog appears. Select the data object you want to use for 
this data list. 


NOF7.5UG~1.BOO Page 438 Thursday, January 21, 1904 11:14 PM 


Chapter 27 
Data Publishing 


439 


The ﬁelds in the selected data object are listed. 


3. Choose a sort ﬁeld from the drop-down list. For internal data objects, you can 
only sort on simple text or image ﬁelds. 


Records are sorted in ascending order. 


4. To ﬁlter the data, click the Set button. You can use simple text ﬁelds to ﬁlter the 
data. 


The Filter dialog appears. 


Current data object 


Fields in the table or 
worksheet in the current 
data object 
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Creating a Data List 


By default, all available records in the data list and on stacked pages appear. You 
can create selection criteria that isolate the records you want in your data list. 


5. Enter your selection criteria and click OK. 


If you do not use all three lines, choose end from the drop-down list at the end 
of the last line you use. 


6. In the Data list area of the Data Publishing dialog, enter a name for the data list. 


7. In the Fields list, select ﬁelds to include in the data list by clicking the check 
boxes to the left of the ﬁelds. 


As a shortcut, you can click the Add All button, which marks all ﬁelds for 
display. Typically, however, you display only a subset of ﬁelds in the data list 
and display all ﬁelds on stacked pages. 


8. To link a ﬁeld to its stacked page, select the ﬁeld in the Data Publishing dialog 
and click the Link/Unlink button. 


A data list automatically includes a navigation button that links to the record’s 
stacked page. When you link a ﬁeld, site visitors can click either the button or 
the linked ﬁeld to jump to the record’s stacked page. 


9. To change the order in which ﬁelds appear in the data list, click a ﬁeld and then 
click the up and down arrow buttons. 


Continue to select ﬁelds and click the up and down arrow buttons until the list is 
in the order you want. 


10. Set the Stacked Page options: 


✦ 
Display all ﬁelds places all ﬁelds available in the data object in a simple layout 
when NetObjects Fusion creates the ﬁrst stacked page. Use this shortcut to 
avoid placing ﬁelds individually as described in “Designing the Stacked 
Page Layout” on page 442. 


✦ 
Add navigation buttons creates smart links to navigation buttons (next/ 
previous/up) when NetObjects Fusion creates the ﬁrst stacked page. Use this 
shortcut so you don’t have to create these buttons as described in “Adding 
Navigation Buttons to Stacked Pages” on page 444. 


Note: The images used for these buttons—SPNavLeft.gif, SPNavRight.gif, and 


SPNavUp.gif—are in the NetObjects Fusion 7.5\NetObjects System folder. 


11. Click OK. 
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The data list placeholder appears. Its column heads are the names of the ﬁelds 
you selected for display, and a data list button appears at the left of the ﬁrst row. 
NetObjects Fusion populates the data list only when you preview or publish the 
page. Data never appears in the data list in Page view. 


12. Set the Data List properties. 


Adjust the settings to change the bullet type, background color, border size, 
spacing of data, and column title display. Drag the column heading borders to 
adjust column width. You cannot change the font type or color in a data list 
except by editing the text style. See “Working with Text Styles” on page 160. 


When you are satisﬁed with the appearance of the data list, create a layout for 
the stacked pages as described in “Designing the Stacked Page Layout” on 
page 442. 


Creating Stacked Pages 


Stacked pages correspond to records in a database. When you store information 
internally in NetObjects Fusion, you enter data for one record on each stacked page. 
If you are drawing information from an external data ﬁle, each stacked page 
automatically displays information from a record. 


Note: You can add or delete stacked pages for internal data as described in “Adding a Stacked 
Page for Internal Data” on page 445. To add or delete records for external data, you 
must make the changes in your external database or spreadsheet and then republish 
the site. 


Data List icon 
from the 
current 
SiteStyle 


Field names 
identify 
columns of 
data 


NOF7.5UG~1.BOO Page 441 Thursday, January 21, 1904 11:14 PM 


442 


Creating Stacked Pages 


Designing the Stacked Page Layout 


The stacked page Layout determines the appearance of all the stacked pages. Data 
ﬁelds and non-data objects (text, pictures, or other assets) added to the stacked 
page Layout are repeated on all stacked pages. Layout changes you make to any 
stacked page are automatically applied to all pages in the stack. 


If you did not select any stacked page options when you created your data list, your 
stacked page Layout is blank. You can add text and graphic objects to this page, just 
like any other page. The key items to be added, however, are the data ﬁelds you 
deﬁned in the data object. 


To design stacked pages: 


1. Go to Site view or use the Site Navigation palette in Page view to navigate to a 
stacked page. 


If you are working with external data, the control bar indicates this is 1 of as 
many records as were imported from the external source. If you are working 
with an internal data object, it indicates this is 0 of 0 because you have not 
created any records. 


Data Field tool 


2. In Page view, select the Data Field tool from the Advanced toolbar, and draw a 
rectangle in the Layout area of the stacked page. The dashed rectangle 
represents the ﬁrst ﬁeld you are adding. 


Drawing a data ﬁeld 
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The Data Field dialog appears. The ﬁelds available on the Name drop-down list 
are in the data object you selected in the Data Publishing dialog when you 
created the stacked pages. 


3. Select a ﬁeld and click OK. 


✦ If you are using external data, NetObjects Fusion displays image or simple 
text ﬁeld data from the ﬁrst record in the data ﬁle. 


✦ If you are using internal data and select an image ﬁle ﬁeld, the ﬁeld area is 
marked with an X. After you create a new record, you can double-click the 
X to open the Picture File Open dialog, select the ﬁle, and then click OK. 


✦ If you are using internal data and select a simple or formatted internal text 
ﬁeld, NetObjects Fusion displays a blank ﬁeld if you have at least one 
record. If there are no records, NetObjects Fusion displays a ﬁeld containing 
the ﬁeld name. Simple text ﬁelds allow only one line of information and all 
characters use the same formatting. Formatted text ﬁelds allow multiple 
lines of information and individual character formatting. See “Adding a 
Stacked Page for Internal Data” on page 445. 


4. Drag the ﬁeld to the location you want on the stacked pages. 


5. Place additional data ﬁelds. Add text blocks to label your ﬁelds, lines, and other 
graphics until you are satisﬁed with the Layout. 
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Creating Stacked Pages 


6. Use the Data Field Properties to set the background and other options for the 
current data ﬁeld. 


7. Do one of the following: 


✦ If you are using external data, your stacked pages are already created. You 
can use the Next and Previous buttons on the control bar to scroll though all 
pages in the stack. 


✦ If you are using internal data, add records as described in “Adding a Stacked 
Page for Internal Data” on page 445. You cannot enter data until you add a 
record to contain it. 


Adding Navigation Buttons to Stacked Pages 


Next and Previous buttons simplify navigation between stacked pages. You can 
automatically add navigation buttons when creating your data list as described in 
“Creating a Data List” on page 438, or you can create custom navigation aids by 
drawing or importing buttons, as described here. 


To add navigation buttons for stacked pages: 


1. In Page view, on one of the stacked pages, add an object to serve as a button. 


You can place text, draw a button using the Draw tool, or import an image using 
the Picture tool. Visit Online view to learn where you can locate a variety of 
images. 


2. Select the object. 


3. Click Link on the object’s Properties palette. 
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4. In the Link dialog, select the Smart Link type. 


5. Select Next Stacked Page or Previous Stacked Page, and then click Link. 


Adding a Stacked Page for Internal Data 


To add a new record to internal data, you create a new stacked page. Each new 
stacked page has the same layout of data ﬁelds and non-data objects as all the other 
pages in the stack. 


You can create as many new stacked pages as you want. For each new stacked page, 
NetObjects Fusion adds a row to the data list on the data list page. You can delete 
stacked pages for internal data whenever you want. 


Note: You cannot add or delete stacked pages associated with an external data object. To add 
or delete records when data is stored externally, you must update your external 
database or spreadsheet application and re-publish your site. 


To add internal data stacked pages: 


Add 


➲ In Page view, on a stacked page, click the plus (+) button on the control bar. 


A stacked page with blank data ﬁelds appears. The counter on the control bar 
indicates the new total of records in the stack. 


Deleting a Stacked Page 


To delete the current stacked page of an internal data object: 


Delete 


➲ In Page view, click the minus (-) button on the control bar and click Yes to 
conﬁrm deletion. 


Adding Text and Images to Stacked Pages 


When a stacked page displays data from an internal data object, you can enter text 
and add pictures in data ﬁelds on the stacked page. You cannot edit text on stacked 
pages that reference external data. 


To enter text in a text data ﬁeld: 


➲ Double-click the data ﬁeld. 


A dotted outline with hollow handles highlights the ﬁeld, and an insertion point 
appears inside. Type the text you want, then click outside the ﬁeld to deselect it. 
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Deleting a Data Object 


To add an image in an image ﬁle data ﬁeld: 


➲ Double-click the data ﬁeld and select the image you want in the dialog that 
appears. 


After you add data to the stacked pages, the data list can display it. Preview the data 
list page to see how it will look in your browser. 


Deleting a Data Object 


If you created stacked pages for the data object, you must delete the stacked pages 
and any data lists before you can delete the data object. 


1. Go to Site view and select the stacked pages. 


2. Press Delete, and click Yes to conﬁrm. 


3. Switch to Page view, select the data list, and press Delete. 


4. Switch to Assets view. 


5. Click the Data Objects tab. 


6. Select the data object and press Delete. 


7. Click Yes to conﬁrm the deletion. 


8. Click the Files tab. 


9. Select the data source ﬁle and press Delete. 


10. Click Yes to conﬁrm the deletion. 
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Working with HTML Directly28 


In addition to adding content, links, and DHTML actions to your site using 
NetObjects Fusion tools, you can work directly with the code to insert HTML and 
scripts. For example, you can add META tags to index your site for search engines, 
power content with JavaScript or Visual Basic routines, center pages throughout 
your site, or do whatever else you can when coding raw HTML. You can’t edit the 
HTML that NetObjects Fusion automatically generates, but you can add your own 
code virtually anywhere. 


Before working with HTML directly, you should be familiar with HTML tags and 
page structure. If you’re not familiar with HTML, you can still complete the tasks 
in “Examples of Page and AutoFrame HTML” on page 457 and “Examples of 
Object HTML” on page 463. 


You can also insert code within link tags and add your own actions. See “Adding 
HTML to a Link” on page 297 and “Customizing Default Actions” on page 377. 


Note: NetObjects Fusion doesn’t verify HTML you add, so be sure to use valid syntax, 
enclosing scripts within <SCRIPT> and </SCRIPT> tags, and so on. Also, assets 
referenced in your HTML aren’t managed in Assets view. If you move the HTML or its 
assets in your directory structure, edit paths in the HTML accordingly. 


This chapter tells you how to add HTML or scripts by: 


✦ Editing the page’s HTML 


✦ Accessing an AutoFrame’s HTML 


✦ Accessing an object’s HTML 


✦ Inserting HTML in a text box 


✦ Coding your own objects 


✦ Coding your own frames 
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Editing the Page’s HTML 


Editing the Page’s HTML 


You can add HTML or script to the HTML NetObjects Fusion generates in HTML 
Source view or in the Page HTML dialog. Using the Page HTML dialog, you can 
add or edit the page’s code 


✦ Before the <HTML> tag 


✦ Between <HEAD> tags 


✦ Inside the <BODY> tag 


✦ At the beginning of the <BODY> tag 


✦ Before the </BODY> tag 


✦ After the </HTML> tag 


For more control over where you insert HTML code, use the NetObjects Fusion 
internal HTML editor in HTML Source view. 


HTML Source view displays all of the page’s HTML code in one place, which 
makes it easier to insert and edit code. You can also use the Find, Cut, Copy, and 
Paste commands in this view. Code that you can edit appears on a white 
background. You cannot edit code that appears on a gray background. 


Working in HTML Source View 


HTML Source view combines advanced HTML editing features, such as color 
syntax highlighting and language element insertion, with familiar word processing 
features, including drag and drop, text editing, and text search. 


In NetObjects Fusion, HTML code is either protected or unprotected. Protected 
code is the HTML that NetObjects Fusion generates when you publish your site. 
You cannot edit this code. Unprotected code is the code you insert. You can edit 
unprotected HTML code in Source view. 


In HTML Source view you can: 


✦ Copy protected blocks of generated HTML and paste them in unprotected areas, 
but you cannot modify or delete them. 


✦ Drag and drop unprotected blocks of HTML. 


✦ Go to a speciﬁc place in the code using the Find command. 


✦ Add code between objects inside the <BODY> and </BODY> tags. 
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✦ Add HTML code at various insertion points outside the <BODY> and 
</BODY> tags. 


✦ Insert a ﬁeld such as the date and time the site was created or last modiﬁed. 
NetObjects Fusion includes several ﬁelds you can use and you can also deﬁne 
your own. 


✦ Insert an HTML, script, or other text ﬁle in an unprotected area. 


✦ Undo, redo, copy, cut, and paste unprotected code. 


✦ View and add frames in a frameset. 


✦ Set and change many HTML options such as formatting, whether to include 
HTML comments in your published code, and so on. See “Setting HTML 
Options” on page 489. 


In HTML Source view you cannot: 


✦ Edit code generated by NetObjects Fusion. 


✦ Insert code inside: 


✧ text generated by NetObjects Fusion. 


✧ the <BODY> tag. 


✦ Insert code across a range of pages. 


Use the Page HTML, Link HTML, or Object HTML dialog to insert code in those 
areas. See “Using the Page HTML Dialog” on page 454, “Adding HTML to a Link” 
on page 297, and “Accessing an Object’s HTML” on page 461. 


Exploring HTML Source View 


To go to HTML Source view: 


➲ In Page view, click the HTML Source tab. 


HTML Source view appears. 
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Editing the Page’s HTML 


Source view is divided into the Document Map pane on the left and the HTML 
Source Editor pane on the right. You can resize the panes by dragging the divider 
bar. 


The Document Map displays the hierarchy of HTML components and language 
elements on the current page. It provides you with quick access to code for 
NetObjects Fusion objects. 


✦ To expand a tag’s code in the Document Map, click the plus sign. 


✦ To collapse a tag’s code, click the minus sign or right-click and choose Collapse 
Item from the shortcut menu. To collapse all tags, choose Collapse Map from 
the shortcut menu. 


✦ Double-click a tag to highlight the corresponding code in the HTML Source 
Editor. 


✦ To hide the Document Map, choose Hide from the shortcut menu. To restore the 
Document Map display, choose Document Map from the HTML Source 
Editor’s shortcut menu. 


The HTML Source Editor displays the source code for the current page. 


✦ Protected code is displayed on a gray background. You cannot edit this code. 


✦ Unprotected code is displayed on a white background. You can edit this code or 
add code anywhere there is a white background. 


Document Map 


HTML 
Source 
Editor 
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✦ Language elements are differentiated by text color: 


✧ Blue: HTML tag 


✧ Green: HTML attribute names 


✧ Maroon: HTML attribute values 


✧ Black: Text that appears on the page 


✧ Gold: HTML and SCRIPT comments 


✧ Purple: SCRIPT tags 


✧ Teal: SCRIPT tags 


✧ Red: Unknown tags 


✦ SCRIPT keywords appear in bold text. 


✦ If the page contains frames, a tab for each frame appears at the bottom of the 
HTML Source Editor. See “Working in the HTML Source Editor” on page 456. 


✦ Blocks of code can be expanded and collapsed by clicking its plus or minus sign 
respectively. 


Adding and Editing HTML and Scripts in HTML Source View 


1. In Page view, click the HTML Source tab. 


2. Edit the source code as necessary. You can: 


✦ Add or edit code anywhere there is a white background. 


✦ Copy blocks of protected code and paste them in unprotected areas. 


✦ Drag and drop unprotected blocks of code. See “Moving Text Using Drag 
and Drop” on page 453. 


✦ Insert the contents of an HTML, script, or other text ﬁle. 


✦ Insert ﬁelds such as the date and time. 


3. To save your edits, from the File menu, choose Save Site. If you switch to 
another view before saving your changes, the Save Files dialog appears. 
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Editing the Page’s HTML 


4. When you switch to another view, the Save Files dialog appears. 


5. Select each ﬁle and frame you want to save, and click Save. Click Cancel to 
undo all changes you made in HTML Source view since the last save. 
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Moving Text Using Drag and Drop 


You cannot drag and drop protected code; you can only do this with your own code. 


To select a block of text: 


1. Move the pointer into the selected block and hold down the mouse button. A 
rectangle appears under the tail of the pointer, indicating that the text can be 
moved. 


2. Without releasing the mouse button, move the pointer to the text block’s new 
location, indicated by the blinking text insertion point. 


3. Release the mouse button to complete moving the text block. 


Finding Text 


In the HTML Source Editor, as in a word processor, you can search for text in the 
current document. 


To ﬁnd text: 


1. View the source code for the page you want to search. 


2. From the Edit menu, choose Find. 


The Find dialog appears. 


3. In the Find what ﬁeld, type the word, letters, or phrase you want to ﬁnd and 
select options to narrow the search. 


4. Click Find Next. 


NetObjects Fusion highlights the text you are searching for. 


Note: You can only search all the code on a page. If you select some code and then search, the 
HTML Source Editor begins searching the code that occurs after the selection. 


Inserting a File 


You can insert the contents of an HTML, script, or other text ﬁle. 


1. Click in a white area in the HTML Source Editor. 


2. Choose Insert File from the Text menu. 


3. In the Open dialog, select a ﬁle to insert. 


4. Click Open. 
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Editing the Page’s HTML 


Inserting a Field 


You can insert ﬁelds that contain variable text such as the date and time the site was 
created or last modiﬁed, the site name and author, and so on. NetObjects Fusion 
includes several ﬁelds you can use; you can also deﬁne your own. To insert a ﬁeld 
into your source code, choose Insert Field from the Text menu. See “Creating and 
Editing Fields” on page 174 for details on inserting ﬁelds. 


To use the author META tag, you must specify the name of the author in the 
Current Site Options dialog. See “Entering META Tags” on page 53. 


Using the Page HTML Dialog 


In Page View, select the area of the page you want to access—the Layout area to 
access the current page’s HTML, or a MasterBorder to access the HTML of several 
pages. Then use the Page HTML dialog to add code to the document. 


To ﬁnd out how to add HTML or script to pages that use AutoFrames, see 
“Accessing an AutoFrame’s HTML” on page 455. 


1. In Page Design view, click in an empty spot in the Layout area or MasterBorder. 
To select a ZeroMargins MasterBorder, click outside the page. 


2. Click the HTML button on the Properties palette. 


The Page HTML dialog appears. 


Click a tab to indicate where in the HTML you want to add tags or script. 
Unlike the HTML Source view, this dialog only lets you enter your HTML or 
script code into one of six locations. 


✦ 
Between Head Tags. Adds code to the <HEAD> content, inserting it just 
before the </HEAD> tag. 


✦ 
Inside Body Tag. Adds code inside the <BODY> tag, as in 
<BODY attribute=value>, where attribute=value is your code. 


✦ 
Beginning of Body. Adds code just below the <BODY> tag. 


✦ 
Start of Page. Adds code just above the the <HTML> tag. 


✦ 
End of Body. Adds code just above the </BODY> tag. 


✦ 
End of Page. Adds code after the </HTML> tag. 


3. Enter your code on the tab. 
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Your typing also appears in blue in the dialog’s gray area, where you can 
preview its location in the HTML that gets generated. 


Note: To enter a tab character as part of the HTML, press Shift+Ctrl+Tab. 


You can click the Insert File button to insert contents of an HTML, script, or 
other text ﬁle. Click the Insert Field button to insert a ﬁeld. See “Managing 
Variables” on page 481. 


4. Click OK. 


Preview the site to test your code, and view the source from your browser to see the 
resulting HTML. To edit your code, open the Page HTML dialog again, click the 
tab containing the code, and make your changes. 


Accessing an AutoFrame’s HTML 


If your site uses AutoFrames, you can add HTML or script to the frameset ﬁle that 
gets generated, for example, to include a <NOFRAMES> tag for browsers that 
don’t support frames or to modify the size or layout of your frames. You can also 
add code to any content page the frames display, for example, to center the frame’s 
contents. 


To add HTML or script 
between the <HEAD> 
and </HEAD>... 


...inside the <BODY> 
tag itself... 


...or to the page's 
content 


Type or paste your HTML 
or script on the tab 


Click to insert contents 
of an HTML, script, or 
other text ﬁle 


Click to insert a ﬁeld 


Preview your code in 
placeholder HTML that 
NetObjects Fusion 
generates 
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Accessing an AutoFrame’s HTML 


Working in the Page HTML Dialog 


In Page view: 


✦ To access the frameset’s HTML, click in the MasterBorder or AutoFrame, then 
click the HTML button on the General tab of the Properties palette. Or right- 
click in the MasterBorder or AutoFrame, and choose Master HTML from the 
shortcut menu. The code is applied to the frameset instead of across a range of 
pages. 


✦ To add code to a frame’s HTML page, click the AutoFrame label and then click 
the HTML button on the Frame Properties palette. Or right-click in the 
AutoFrame, and choose Frame HTML from the shortcut menu. 


In each case, the Page HTML dialog appears, where you can add code as described 
in “Editing the Page’s HTML” on page 448. 


Note: If you remove the AutoFrame from a MasterBorder, code added to the frame’s content 
HTML is deleted. 


Working in the HTML Source Editor 


You can also add or edit a frameset in the HTML Source Editor. When a page 
contains frames, tabs appear at the bottom of the HTML Source Editor, one for 
each frame in the frameset, one for the page Layout (the Body frame), and one for 
the frameset. 


The names of frames are assigned by default when you choose a frame on the 
AutoFrames tab of the MasterBorder Properties palette. The frame names display 
as framename_pagename.html for all frames that must change from page to page 
and as framename_masterbordername for all frames that do not change. 


The default names are Left Frame, Right Frame, Top Frame, and Bottom Frame, 
depending on which type of frame you selected. Additionally, there are two other 
tabs: Body Frame and Frameset Page. The Body Frame tab displays the code for the 
page Layout. The Frameset Page tab speciﬁes information about the frameset such 
as the names and attributes for each frame in the frameset and META tags for the 
page. 
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To edit a frame: 


1. Click the HTML Source tab in Page view. 


2. Click the tab with the name of the frame you want to edit. See “Editing the 
Page’s HTML” on page 448. 


Examples of Page and AutoFrame HTML 


Indexing Pages for Search Engines 


To give your content the best chance of being found and ranked by search engines 
like AltaVista, you can add META tag descriptions and keywords to your pages’ 
<HEAD> content. Site visitors don’t see this information, but search engines 
require it to index your site. 


Note: Search engines index frameset ﬁles, so if your site uses AutoFrames or scripted frames, 
be sure to access Master HTML so your tags are added to the frameset ﬁle. 


1. In Page view, click in the Layout area of the page you want indexed, or in the 
MasterBorder or AutoFrame to index a set of pages. 


2. Click the HTML button on the General tab of the Properties palette. 


The Page HTML dialog appears. 


Left Frame is the 
source code for 
the left frame 


Body Frame is 
the source code 
for the main 
page (Layout) 


Frameset Page 
is the source 
code for the 
frameset 
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Examples of Page and AutoFrame HTML 


3. Click the Between Head Tags tab and enter META tags that describe your 
content. For example, type: 


<META NAME="DESCRIPTION" CONTENT="Large selection of valuable, high quality 
antiques and collectibles for any budget."> 


where the content is a one-sentence description containing the most important 
keywords site visitors might search for. Then type: 


<META NAME="KEYWORDS" CONTENT="antiques, quality antiques, valuable antiques, 
low-cost antiques, collectibles, jewelry, furniture, novelties"> 


where the content lists all important keywords. 


Note: You can also enter META keywords in the Current Site Options dialog. 
See“Entering META Tags” on page 53. 


4. Click OK. 


5. Register your site with search engines. 


You must do this separately with each search engine for it to ﬁnd your site. Visit 
AltaVista, Excite, Lycos, Yahoo, and so on, for information. Search engines 
continually evolve how they use content to index and rank pages, and many of 
them make this information available at their sites. Visit Online view for 
registration information. 


To see the resulting HTML, publish the site and view the source in your browser. To 
test the tags you added, publish the site and search for keywords using the various 
search engines. Be patient, as it can take days or weeks for indexers to ﬁnd your 
site. 


Auto-Forwarding from a Transition Page 


You can create a transition page that appears for a few seconds, for example, to 
display a product logo, and then forwards site visitors automatically to another 
page. You do this by inserting a META tag in the page’s <HEAD>. 


1. In Page view, click in the Layout area of the transition page, and click the 
HTML button on the Layout Properties palette. 


The Page HTML dialog appears. 


2. Click the Between Head Tags tab and type: 
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<META HTTP-EQUIV="REFRESH" CONTENT="seconds; URL=http://server.domain.com/ 
page.html"> 


where seconds is the number of seconds you want the transition page to appear, 
and http://server.domain.com/page.html is the URL of the page you want to link to. 


3. Click OK. 


Preview the site to test the transition, and go to HTML Source view to see your 
code. 


Accommodating Browsers that Don't Support Frames 


Some older browsers don’t support frames. To prevent site visitors using these 
browsers from being greeted with a blank page or error message when they access 
your site, add alternate content for them using the HTML <NOFRAMES> tag. 


You add the <NOFRAMES> tag and your alternate content to the frameset ﬁle 
generated when you publish. Your content can include text, pictures, and links, 
using standard HTML tags. 


1. In Page view, right-click in the MasterBorder and choose Master HTML. 


The Page HTML dialog appears. 


2. Click the Beginning of Body tab and enter: 


<NOFRAMES> 


<H1>Thanks for visiting our site!</H1> 


We’re sorry you haven’t had a chance to upgrade your browser yet and can’t see our 
framed site. We think the frames make it easier to ﬁnd what you want. 


<P>If you want to obtain a more current browser, check out either Microsoft’s <A 
HREF=”http://www.microsoft.com”>Internet Explorer</A> or Netscape’s <A 
HREF=”http://www.netscape.com”>Navigator or Communicator</A> products! 


</NOFRAMES> 


3. Click OK to close the dialog. 
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Examples of Page and AutoFrame HTML 


A site visitor with a browser that supports frames sees the framed site as you 
designed it. A site visitor with an older browser sees the following: 


Creating a Default Target Frame 


If you code your own frames, and one content page contains a lot of links that target 
the same frame, you can make that frame the default target. That way you don’t 
have to choose a target attribute for each link. The default target for the contents of 
a frame that displays navigational buttons, for example, might be a frame that 
displays the primary content those buttons point to. Unless you add a target 
attribute specifying differently, all links on that page display their contents in the 
default frame. 


1. In Page view, open the content page to be targeted. 


2. Click the HTML button on the Layout Properties palette. 


The Page HTML dialog appears. 


3. Select the Between Head Tags tab and enter: 


<base target="framename"> 


where framename is the name of the frame as deﬁned in the frameset ﬁle that 
you want to be the default target. 


4. Click OK to close the Page HTML dialog. 
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Create several links on the content page using the Link dialog. Don’t add any 
HTML specifying a target frame. Preview the site and test the links. They should all 
display contents in the default target frame. 


Accessing an Object’s HTML 


You can add HTML or script to pictures, media, a text box, or any other object, to 
modify or control that object. You can enclose the object in HTML tags, or add 
HTML or script inside the object’s tag. 


You can add code before and after a text box’s HTML as described here. To insert 
code inside a text box, see “Inserting HTML in a Text Box” on page 464. 


1. In Page view, select the object you want to add code to, and click the HTML 
button on the Properties palette. Or from the Object menu, choose HTML. 


The Object HTML dialog appears. 


2. Click the tab to indicate where you want to insert HTML or script. 


✦ 
Before Tag. Adds code just before the object’s tag, as in your_code <IMG SRC=>, 
if the object is a picture. 


✦ 
Inside Tag. Adds code inside the object’s tag, as in <IMG SRC=”Image.gif” 
attribute>, where attribute is your code. This tab appears only if you can add 
something inside the object’s tag. 


✦ 
After Tag. Adds code just after the object’s tag; for example, to insert a 
closing HTML tag for any opening tag inserted before the object. 


3. Enter your code on the tab. 


Your typing also appears, shown in blue, in the dialog’s gray area, where you 
can preview its location in the object’s HTML. 
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Accessing an Object’s HTML 


You can click the Insert File button to insert contents of an HTML, script, or 
other text ﬁle. Click the Insert Field button to insert a ﬁeld. See “Managing 
Variables” on page 481. 


4. Click OK. 


HTML indicator icon 


The object is marked with an HTML icon. 


Preview the site to test your code, and view the source from your browser to see the 
resulting HTML. To edit the code, open the Object HTML dialog again, click the 
tab containing your code, and make changes. 


To add HTML or script 
between the <HEAD> 
and </HEAD>... 


...inside the <BODY> 
tag itself... 


...or to the page's 
content 


Type or paste your HTML 
or script on the tab 


Click to insert contents 
of an HTML, script, or 
other text ﬁle 


Click to insert a ﬁeld 


Preview your code in 
placeholder HTML that 
NetObjects Fusion 
generates 
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Examples of Object HTML 


Displaying a Message on Mouse Click 


You can display a message when site visitors click an image or text link. One way 
to do this is by creating a Blank link and inserting an onClick JavaScript in the 
link’s opening <A HREF> tag. 


Note: You cannot add or edit HTML for links in HTML Source view. You can only do this in the 
Link HTML dialog. 


1. In Page view, select the image or exact text site visitors are to click, and click 
the Link button on the Properties palette. 


The Link dialog appears. 


2. Select Smart Link from the Link type drop-down list and select Blank in the 
Name column. 


3. Click the HTML button in the Link dialog. 


The Link HTML dialog appears. 


4. Click the Inside Link tab and type: 


onClick="alert('your message')" 


where your message is the text of your message. 


5. Click OK in the Link HTML dialog, then click Link in the Link dialog. 


Preview the page and click the image or text to see the message. 


View the HTML source in HTML Source view to see the resulting HTML. 


Another way to add this JavaScript to a picture or text link is to create a custom 
link. In the Link dialog, select External Link as the Link type, choose javascript 
from the New link drop-down list, and type the onClick script in the New link field. 


Message that 
appears when site 
visitors click the link 
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Inserting HTML in a Text Box 


You can insert HTML or script inside the contents of a text box at the insertion 
point, for example, to add text attributes or comments to the HTML. Note that you 
cannot do this in HTML Source view. 


1. In Page view, double-click in the text box to get an insertion point. 


2. From the Text menu, choose Insert HTML. 


The Insert HTML dialog appears. 


3. Enter your HTML or script. 


Note: The Insert HTML dialog can contain up to 255 characters. To insert more than 
255 characters, use the HTML Source Editor or Object HTML dialog or 
reference an external HTML ﬁle. 


4. Click OK. 


Marks HTML inserted in a 
text box 


Preview the page to test your code, and view the source from your browser to see 
the resulting HTML. 


...is inserted where 
you clicked in the 
text box, in the 
published HTML 


What you type or paste here... 


For <STRONG>SPECIAL DEALS</STRONG>, click here 


You can double-click here to reopen the 
Insert HTML dialog to view or edit the code 
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Coding Your Own Objects 


You can create an object, such as a Java applet or a table you want to code yourself, 
by entering HTML or script in an empty text box. 


1. In Page view, draw a text box where you want the object to go. 


The box marks the object’s position when you publish, but it can grow vertically 
or horizontally depending on the object. To approximate the published size in 
your Layout area, select Lock height on the Text Box tab of the Text Properties 
palette. 


2. Right-click in the text box and choose Object HTML from the shortcut menu. 


The Object HTML dialog appears. 


3. On the Before Tag tab, type, paste, or insert the HTML or script. 


4. Press Enter after the script and type <!-- 


5. On the After Tag tab, type --> 


6. Click OK. 


You deﬁned a space on the page for a text item, inserted the HTML or script, and 
told NetObjects Fusion to put the HTML or script in place of the text. 


Preview the page to test your code, and view the source from your browser to see 
the resulting HTML. If necessary, go back and adjust the box’s position in Page 
view to get the actual spacing you want. 
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Coding Your Own Frames 


You can create HTML frames in any part of the MasterBorder without coding 
HTML by using AutoFrames. But if you want to put frames in the body of your 
page, you can script them, just as with any HTML editor. 


Here’s an example of accessing HTML to create a section of a site that uses two 
horizontal frames–one body frame that scrolls, and a footer frame that doesn’t. 
Navigation buttons in the footer open each of two pages in the body, while a Home 
Page button links out of the frames section to the site’s Home page. 


1. In Site view, create a new page for the frameset—the page where your frames 
begin. Name the page Frames. 


2. Beneath this page, create three content pages for the frames to display, named 
Footer, One, and Two. 


3. Display the Frames page in Page view, and add HTML that deﬁnes it as a 
frameset, setting the size and position of each frame, and the content it initially 
displays. 


Select the Layout, click the HTML button on the Layout Properties palette, and 
type the following in the Between Head Tags area of the Page HTML dialog: 


<frameset rows=”*,70”> 
<frame name=”main” src=”./html/one.html”> 
<frame name=”footer” src=”./html/footer.html”> 
</frameset> 


Or, if you’re publishing the site using the Flat directory structure rather than the 
by Asset Type structure, type the following for the second and third lines: 


<frame name=”main” src=”./one.html”> 
<frame name=”footer” src=”./footer.html”> 


Attach HTML to this page to deﬁne it 
as a frameset 


Add content to the frames on these pages 
using NetObjects Fusion tools 
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This HTML creates two horizontal frames—one called “main” that occupies the 
bulk of the page, and a 70-pixel-high frame called “footer” at the foot of the 
page. 


Click OK in the dialog when you’re done. 


Note: The src attribute is a relative path name to a content page that must match 
exactly the path name generated when you publish the page. The path 
depends on the directory structure selected in Publish view (from the Publish 
menu, choose Arrange Files, and then choose one of the submenu options). 
The ﬁle name is the page’s name in Site view, all lowercase, with an .html 
extension and an underscore in place of spaces and other special characters. 
So One in Site view becomes one.html in the resulting HTML. If you’re not 
sure where a content ﬁle is relative to your frameset page, or what its HTML 
name is, look in Publish view. 


4. Open the Footer page in Page view. 


5. Click in the MasterBorder and select ZeroMargins in the Name ﬁeld on the 
MasterBorder Properties palette. 


6. Click in the Layout area and enter 110 in the Height ﬁeld on the Layout 
Properties palette. 


7. Add three text boxes to the Layout, containing the text One, Two, and Home. 


8. Select the text One, click Link, select the Internal Link type, and select the One 
page. In the Target section of the Link dialog, click New and type main in the 
text ﬁeld next to the New button. Click Link to close the dialog. 


9. Select the text Two and create an internal link to the Two page. In the Target 
section of the Link dialog, click Existing and select main from the drop-down 
list. Click Link to close the dialog. 


10. Select the text Home and create an internal link to the Home page. In the Target 
section of the Link dialog, click Existing and select _top from the drop-down 
list. Click Link to close the dialog. 
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11. Open the One and Two pages in Page view, choose the ZeroMargins 
MasterBorder on the MasterBorder Properties palette, and add whatever content 
you want to appear in the main frame for each page. Add content to the Home 
page. 


You can’t preview to see scripted frames, so publish the site and test your frames. 
Click each button in the bottom frame. The One button should display the contents 
of the One page in the top frame, the Two button should display the Two page in the 
top frame, and the Home button should exit the frames altogether and display the 
Home page in the whole browser window. 


“main” frame 


Add pictures and text to 
content pages using 
NetObjects Fusion tools 


“footer” frame 


Frameset HTML you 
added deﬁnes the frame 
boundaries 
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Managing Assets 
29 


With NetObjects Fusion, you can manage all the assets—ﬁles, links, data objects, 
and variables—used in your site. In Assets view, you can navigate to the pages on 
which these assets appear, delete unused assets, and verify the location of assets 
that are in use. For information about how to add assets to a site, see Chapter 6, 
“Page View Basics.” 


NetObjects Fusion uses aliases for ﬁles and external links, so you can globally 
replace an item that appears on several pages—such as a picture or an external 
link—by replacing the ﬁle or link once in Assets view. If you insert a variable in 
text boxes on different pages, you can edit the value of the variable in Assets view 
and NetObjects Fusion updates all instances of the variable throughout your site 
automatically. 


This chapter describes: 


✦ Managing ﬁles 


✦ Managing links and link targets 


✦ Managing data objects 


✦ Managing variables 
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Working in Assets View 


Assets view 


When you switch to Assets view, choose which kind of asset to view by clicking 
one of the four tabs below the control bar. You can sort a list by clicking a column 
heading, and you can change the width of any column by dragging the column 
divider to the left or right. 


Depending on the selected tab, Assets view shows: 


Click a tab to see ﬁle assets, links, data 
objects, or user-deﬁned variables 
Click a column heading 
to sort the table 
Drag the column divider to 
change column width 


Asset type 
Column headings 


Files 
Name, Type, In Use, Location, Size, Date, Verify Status 


Links 
Name, Link To, Type, Target, Verify Status 


Data Objects 
Name, Type 


Variables 
Name, Contents 
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Managing File Assets 


When you click the Files tab in Assets view, a list of the ﬁles associated with your 
site appears, including external ﬁles and those generated by NetObjects Fusion. File 
types include image, audio, video, applets/plugins, Java class, HTML, data source, 
and link target. 


In Assets view, you can add assets, edit asset names, and go directly to the page 
containing a selected asset. You can verify the locations of assets in your site, and 
you can open an asset ﬁle for editing in the application associated with it. You can 
also replace assets, delete selected assets, or delete all unused assets in a single 
action. 


For example, if you have an image ﬁle of an arrow that indicates the next page in 
the site, you could name this asset Next Page and place it on several pages. If you 
later decide to change the image to a pointing ﬁnger, you need only edit the ﬁle 
asset so Next Page uses the pointing ﬁnger image ﬁle. NetObjects Fusion 
automatically changes the image on all the pages that include the Next Page image 
asset. 


The File dialog displays an asset’s name, location, and the pages on which it is 
used. To display the File dialog, double-click an asset’s name in Assets Files view. 


This is the asset’s location 


This is the name that appears in the 
Name list in Assets Files view 


These are the pages on which the 
asset is used 


Selecting this option publishes the 
asset any time the site is published, 
even if the asset is not in use 
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Note: Image ﬁles that you place on stacked pages to populate an internal data object are not 
listed in Assets view. You can manage such ﬁles directly on the stacked pages. For 
information about data objects and stacked pages, see Chapter 27, “Data Publishing.” 


File Asset Characteristics 


To effectively manage assets, it helps to understand the characteristics of asset ﬁles 
and how NetObjects Fusion handles them in Assets view. 


✦ Assets view lists all assets ever added to a site whether they are currently 
included in the site or not. 


✦ Assets view is a list of pointers to the asset files in their directories. Assets view 
does not contain the actual asset ﬁles themselves. When you publish a site, 
assets are copied from their current location to the publish location. 


✦ Assets are not copied to the \Assets folder except in special cases—when you 
import a site that contains assets in its assets directory or start a site based on a 
template with assets. 


✦ Assets view does not show the contents of any speciﬁc directory on your local 
hard disk or server. 


Adding a File Asset 


New Asset 


1. In Assets Files view, from the Assets menu, choose New File Asset, or click 
New Asset on the control bar. 


The File dialog appears. 


2. In the Location ﬁeld of the File dialog, type the path and ﬁle name of the asset 
you want to add, or click Browse and select a ﬁle. 


3. If you want, edit the Asset name and click OK. See “Editing Asset Names and 
Locations.” 


4. To force publication of the ﬁle, even if it is not in use, select Always publish ﬁle. 


5. Click OK. 


When you add an asset in this manner, it is available for use in your site, but it is not 
yet actually in use. The asset now appears on the Assets tab in the Open dialog. See 
“Reusing Assets” on page 83. 
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Editing Asset Names and Locations 


Giving custom names to assets can make them easier to manage. 


1. In Assets Files view, double-click the asset name to display the File dialog. 


2. Type a new name in the Name ﬁeld and click OK. 


You can also edit the location directly in the File dialog. For example, you could 
enter a URL instead of a ﬁle path to point to a dynamic image on a server. Such 
images, however, are represented by an X in Page view, because the asset is not 
accessible. 


This picture shows 
its new name 
The original asset 
name appears here 
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Opening a File Asset in an External Application 


NetObjects Fusion can automatically open a ﬁle asset in the external application 
with which the ﬁle asset is associated. For HTML documents, and .gif and .jpeg 
image ﬁles, you can specify your preferred editing application in the Application 
Options dialog. See “Setting Program Options” on page 20. For other types of ﬁles, 
see “Editing Objects and Assets” on page 84. 


To open a ﬁle asset in an external application: 


1. In Assets Files view, select the asset. 


2. From the Assets menu, choose Open Asset. 


3. Make your changes and save the ﬁle in the external application. 


Displaying a Page Containing a Speciﬁc File Asset 


1. In Assets Files view, double-click a ﬁle asset to open the File dialog. 


2. Select the page you want to see from the list of pages. 


3. Click the Go To button. 


The page you selected appears in Page view. 


Deleting a File Asset 


You should only delete assets not in use. If you delete an asset in use on a page, the 
object containing that asset appears as a blank or with an “X” through it in Page 
view. 


To avoid deleting assets in use, double-click the asset in Assets view to see if it’s 
used on any pages before you decide to delete the asset. 


To delete a ﬁle asset: 


1. In Assets view, right-click the ﬁle asset you want to delete and choose Delete 
File Asset from the shortcut menu. You can also select the ﬁle asset in the list 
and press the Delete key on the keyboard. 


2. Click Yes to conﬁrm the deletion. 


Note: You cannot undo this operation. You must use the New File Asset command 
on the Assets menu to recreate the ﬁle asset. 
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Deleting All Unused File Assets 


1. In Assets view, from the Assets menu choose Delete All Unused File Assets. 


2. Click Yes to conﬁrm the deletion. 


NetObjects Fusion removes all ﬁle assets for which the In Use indicator is not 
Yes. 


Note: You cannot undo this operation. You must use the New File Asset command to 
recreate ﬁle assets. 


Verifying File Assets 


To make sure assets publish correctly, you can verify that all ﬁle assets are in their 
expected folders. However, if any portion of the ﬁle’s path has changed, the ﬁle will 
not be found or veriﬁed. For example, if the hard disk drive letter is not the same, or 
not present, or if a folder name is changed or the folder is moved, or if the ﬁle name 
is changed or the ﬁle is moved, the ﬁle will not be found. 


1. In Assets view, from the Assets menu choose Verify All File Assets. 


NetObjects Fusion veriﬁes and reports the path status of all ﬁles. 


✦ When a ﬁle’s path information is correct, NetObjects Fusion lists the date 
and time found in the Verify Status column. 
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✦ If a single ﬁle is not found, the Verifying Files Used by File Assets dialog 
appears identifying the missing ﬁle and the original path. 


✦ If a folder containing assets is not found, the Verifying Folders Used by File 
Assets dialog appears identifying the missing folder and its original path. 


2. Resolve the paths of any lost ﬁles or folders. 


✦ To specify a new path, click Browse and locate the ﬁle or folder. 


✦ To skip the lost item and continue veriﬁcation, click Skip. NetObjects 
Fusion gives this ﬁle Not found status and goes on to verify subsequent ﬁles 
or folders. If the ﬁle is due to be published, you receive a publish error. 


✦ To stop the veriﬁcation process, click Cancel. The veriﬁcation status of the 
current ﬁle or subsequent ﬁles is not updated. 


3. When veriﬁcation is complete, click OK in the conﬁrmation dialog. 
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Managing Links and Link Targets 


When you click the Links tab, a list of all the links and link targets used in your site 
appears, including external links, ﬁle links, user-deﬁned internal links, and smart 
links. See Chapter 19, “Creating Links and Anchors.” 


Links between entries in a data list and their associated stacked pages do not appear 
in Assets view. You can manage such links directly on the data list pages. See 
“Creating a Data List” on page 438. 


Updating an External Link 


The Link To location varies depending on the type of link. In Assets view, you can 
change the location of an external link yourself by changing the URL. You can also 
change the name of the link for Assets view but not the link’s other characteristics. 


1. In Assets Links view, double-click the external link you want to update. 
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The Links dialog appears. 


2. Change the name in the Name ﬁeld if desired. 


3. Update the URL in the Link To ﬁeld and click OK. 


You can only update the location of one link at a time. To update other external 
link URLs, repeat the process. 


If you have a list of links created in HTML and import the HTML into Page 
view, the links are automatically added to Assets view. Otherwise, you cannot 
import a list of links in Assets view. 


List of pages that use the link 


Name of the link 


Location of the link 
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Displaying the Page Containing a Link 


1. Double-click the link in Assets Links view. The Links dialog appears. 


2. Select the page you want to see in the list of pages. 


3. Click the Go To button. 


The page you selected appears in Page view. 


Adding an External Link 


1. In Assets Links view, from the Assets menu choose New Link, or click New 
Asset on the control bar. 


The Links dialog appears. 


2. Enter a name. 


3. Type the link destination and click OK. 


Be sure to include http:// or a similar designator. 


Deleting a Link 


1. In Assets Links view, select the link you want to delete 


2. From the Edit menu, choose Delete Link or press Delete. 


3. Click Yes to conﬁrm the deletion. 


You cannot delete a link that is in use. You must use the Link dialog to unlink. 


Note: You cannot undo this operation. You must use the Add Link command to 
recreate the external link. If you accidentally delete a non-external link, you 
must recreate it in Page view. 


Updating Link Targets 


1. In Assets Links view, double-click the link target you want to update. 


The Link Targets dialog appears. 


2. Change the name of the link target if desired. 


3. Click OK. 
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Verifying Links 


To make sure links will work properly when a site visitor clicks them, you can 
verify link destinations. 


1. In Assets Links view, from the Assets menu, choose Verify All Links. 


NetObjects Fusion displays a progress bar as it veriﬁes and reports the status of 
link destinations. It accesses the Internet to verify external link references. If 
you are not connected to the Internet, the external links are not veriﬁed. 


✦ When a link’s destination is found, the date and time of validation appear in 
the Verify Status column. 


✦ If a link’s destination is not found, the problem is described in the Verify 
Status column. 


When veriﬁcation is complete, the progress bar disappears. 


2. Resolve the destinations of broken links by double-clicking the link and editing 
it as described in “Updating an External Link.” 


Link veriﬁcation takes place in the background, so you can switch to another view 
and continue working while links are being veriﬁed. 


To verify links through a proxy server, open the Windows Control Panel and 
double-click the Internet icon. In the Internet Properties dialog, click the Advanced 
tab, select Use Proxy Server, and conﬁgure your proxy server settings. 


Note: When NetObjects Fusion cannot verify that an http, rlogin, tn3270, snews, or JavaScript 
link is valid, “Unsupported URL Type”displays in the Verify Status column. If NetObjects 
Fusion cannot verify a mailto, news, or telnet link, no status displays. 


Managing Data Objects and Photo Galleries 


Data objects are collections of ﬁelds of data. You can use a data object to publish 
data without using CGI scripts or database programming. For information about 
data objects, including how to create and delete them in Assets view, see 
Chapter 27, “Data Publishing.” 


When you click the Data Objects tab, NetObjects Fusion displays a list of all the 
data objects used in your site. In an internal data object, you can edit the name and 
ﬁeld names and add new ﬁelds. See “Changing an Internal Data Field Name” on 
page 436. 
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For an external data object, you can change Simple ﬁelds to Image ﬁelds and vice 
versa, but you cannot edit ﬁeld names or add new ﬁelds, because these items 
depend on data in the external data ﬁle. Data objects can also be deleted, but use 
care when deleting and make sure the data object is no longer in use on the site. 


Photo galleries are a special type of data object. For information about photo 
galleries, including how to delete them in Assets view, see Chapter 14, “Creating 
Photo Galleries.” You can conﬁgure a photo gallery here by double-clicking it. 


Managing Variables 


Text variables make it easy to update text that appears throughout your site. User- 
deﬁned variables are displayed in Assets Variables view so you can edit, create, or 
delete them. NetObjects Fusion also provides standard variables, such as the date 
and time the site was created or last modiﬁed, but these are not displayed in Assets 
Variables view. 


Note: See “Changing General Settings” on page 52 to enable variable subsitutions. 


Adding a Variable 


New Asset 


1. In Assets Variables view, from the Assets menu choose New User-Deﬁned 
Variable, or click New Asset on the control bar. 


The New Variable dialog appears. 


2. Enter a name and value for your variable and click OK. 
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Editing a Variable 


1. Double-click the variable in Assets Variables view. 


The Edit Variable dialog appears. 


2. Edit the name and value of the variable and click OK. 


If you edit the value of the variable, NetObjects Fusion updates all text blocks 
containing that variable with the new value. See “Creating a User-Deﬁned 
Variable” on page 175 for information about adding variables to your pages. 


Deleting a Variable 


1. In Assets Variables view, select the variable you want to delete. 


2. From the Edit menu, choose Delete User-Deﬁned Variable. 


3. Click Yes to conﬁrm the deletion. 


Note: You cannot undo this operation. You must use the New Variable command to recreate 
the variable. Do not delete a variable that is in use. If you do, it will be replaced with 
Undeﬁned User variable:variable name in the text where it was used. 
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Publishing Your Site 
30 


After completing your site design and development, you’re ready to publish the 
results. Publishing puts your site on a server so you and others can see it using a 
browser. The NetObjects Fusion publishing process generates HTML ﬁles for the 
site’s pages and associated assets. NetObjects Fusion transfers the generated 
HTML ﬁles to the server you use for Web hosting. You can control the location of 
your site, directing NetObjects Fusion to save it to a local disk drive so only you 
can see it, or to a remote server so others can see it, too. When you’re sure the site is 
ready for the Web, you publish it to a Web server so everyone in the world can visit 
your site. 


Note: Sites published with NetObjects Fusion work with any Web server, on any operating 
platform. No special Web-server extensions are required. If your site contains special 
components also installed on the server—including NetObjects Fusion Form Handler, 
CGI scripts, or third-party components—it requires extra steps to set up to publish on a 
server. 


This chapter describes: 


✦ The publishing process 


✦ Exploring Publish view 


✦ Publishing locally 


✦ Transferring the site to the Web 
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The Publishing Process 


The NetObjects Fusion publishing process involves two basic steps: generating 
HTML ﬁles and then transferring the generated HTML ﬁles to the Web server. 


✦ When you select Publish Site, NetObjects Fusion converts your site into HTML 
pages and associated assets using the SiteStructure, page design, content, links, 
and assets information in the Sitename.nod ﬁle. These generated HTML ﬁles are 
used by browsers to display your Web site. You specify where the generated 
HTML ﬁles are saved. A typical scenario is to publish the HTML ﬁles locally 
onto your computer’s hard disk where you can then open, run, and test the site 
in your browser without connecting to the Internet. When the site is exactly 
right, you’re ready to publish it to a Web server. 


✦ Selecting Transfer Files to Server from the Publish menu copies the locally 
published HTML ﬁles to the server you use for Web access. To speed the 
transfer process, NetObjects Fusion uses its own built-in FTP program. 


Caution: You must use NetObjects Fusion to transfer your site’s HTML and asset files from one 
location to another. You cannot move generated HTML ﬁles from one location to 
another, nor can you rename the ﬁles in Windows Explorer. Renaming the ﬁles or 
moving them to a new location breaks links because the ﬁle locations are different 
than those speciﬁed in the generated HTML ﬁles. 


NetObjects Fusion’s default publish setting (Local Publish) is preconﬁgured to 
publish the HTML ﬁles on your local disk. You do not have to do additional setup. 
However, when you’re ready to publish to a remote Web server, you must set up a 
publish proﬁle for your ISP’s Web server. You can create as many publish proﬁles 
as you need, but you can only log on to one server at a time. 


If you’re working on a company’s intranet and want a few site visitors to test the 
site before you transfer it to the Internet, you can publish the HTML ﬁles to one or 
more private intranet servers. Then, when it’s ready to share with the world, you can 
publish the site directly to your company’s Web server. 
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The following ﬁgure summarizes the basic publishing process with NetObjects 
Fusion. 


Additional Publishing Notes 


✦ Sites published with NetObjects Fusion work with any Web server, on any 
operating platform. No special Web server extensions are required. 


✦ When you re-publish your site, for example to update pages or add new 
information, NetObjects Fusion overwrites existing ﬁles as needed. You can 
also remove old ﬁles or obsolete assets from local or remote directories by 
selecting View/Delete Server Contents from the Publish menu. 


✦ NetObjects Fusion does not automatically publish through ﬁrewalls or to proxy 
servers. See “Publishing with Firewalls or Proxy Servers” on page 517. 


✦ If NetObjects Fusion has difﬁculty storing your site on a remote Web server: 


✧ Make sure your system is online and has a valid connection to your network 
or the Internet. 


✧ Make sure the server is not down or ofﬂine. 


✧ Make sure your publish proﬁle settings are correct. Test the remote server, 
account name, and password settings displayed in the Publish Settings 
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Exploring Publish View 


dialog by using them to log on to the server using a separate FTP or telnet 
application. 


✧ Make sure your account has the appropriate permissions and that sufﬁcient 
storage space for your site is available on the server. 


✧ If your company uses a proxy server or has established ﬁrewalls for security, 
make sure the server settings are appropriate for the proxy or ﬁrewall. 


✦ If you deﬁne publishing settings for a site, and then export that site as a 
template, those settings travel with the template. If you are sharing a template 
with colleagues who can use the same publish settings, you can save time by 
conﬁguring the publish settings in advance, exporting them with a template, and 
then distributing the template. 


Exploring Publish View 


You use NetObjects Fusion Publish view to publish a site. Publish view looks 
similar to Microsoft Windows Explorer or Windows NT File Manager. 


Publish view presents a representation of the ﬁle structure that will be created when 
you publish your site. It does not represent the existing structure for your site on 
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your hard disk or server. Therefore, changing the directory structure in Publish view 
does not affect the page relationships in Site view and, likewise, changing the page 
relationships in Site view does not affect the representation in Publish view. 


Changes that you make to the directory structure in Publish view only affect your 
site’s current directory structure when you publish your site. 


The Contents of location pane on the left displays the directory structure of your 
site as it will be published on your server. You can delete, rearrange, or rename the 
directories shown in the pane, and you can create new subdirectories at any level 
below the root. Locked components and their related assets, signiﬁed by a black 
lock image on their icons, cannot be renamed or rearranged. 


The Contents of directory pane on the right displays the contents of the directory 
currently selected in the left pane. For each directory, page, or asset, the pane 
displays its name, type, attributes, and the date and time of the last local and remote 
publish. You can sort the content ﬁles and folders by clicking a column heading, 
and you can resize the columns by dragging the column heading border. The icons 
associated with different ﬁle types are set in the Windows File Types Registry. 


Click a directory’s plus sign to expand the display to show the subdirectories 
beneath it. Click a directory’s minus sign to collapse the display and hide the 
subdirectories beneath it. Resize the panes by dragging the divider bar in either 
direction. 


Publishing Locally 


While developing a site, you should publish it at least once to your local hard disk 
to check that the site works as intended. After the site is published to your hard 
disk, NetObjects Fusion launches your browser so you can view the site and see 
how it will appear to site visitors on the Web. 


If, after publishing the site to your hard disk, you make changes to the site in 
NetObjects Fusion, re-publish the site. Depending on the complexity of the site, 
you may publish several times to get the site working as desired. Then, when the 
site works perfectly, publish it to your Web server or ISP server so everyone in the 
world can appreciate your handiwork. 
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Setting Up to Publish Locally 


Publish Settings 


1. In Publish view, click the Publish Settings button on the control bar. 


The Publish Settings dialog appears. 


2. In the Select Proﬁle drop-down list, choose Local Publish. 


3. Check the Directory name. By default, NetObjects Fusion preconﬁgures the 
local location to \Sitename\Local Publish. Also, make sure the local disk drive has 
sufﬁcient space for your published site ﬁles. 


If you want to publish the site to a different directory, do one of the following: 


✦ Enter the drive and directory path you want to use. This path can point to an 
existing directory or create a new directory. 


To publish to a different machine on your local network, create a new local 
publish proﬁle and browse to that machine. 


✦ Click Browse and select the folder you want to use, or create a new folder. 


To create a new folder, select the folder in the Browse dialog in which you want 
to create the new folder, then click OK. Enter the name of the new folder at the 
end of the path in the Directory ﬁeld. 


To prevent your site’s HTML ﬁles from getting mixed in with other ﬁles, you 
should always use an empty directory the ﬁrst time you save the ﬁles. 
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4. Click Advanced publish settings. 


5. Select the options for your site’s pages: 


✦ 
Home page ﬁle name. Index is the default page name recognized by most Web 
servers. Select Current Page Name to set the Home page to use the same 
name as in Site view. Select Home or Default to set the page as in Home.html 
and Default.html. 


✦ 
File extension for HTML pages. Select .htm, .html or .shtml depending on the 
page extension your browser recognizes. Click the browse button to enter a 
page extension that is not available in the drop-down list. 


Make sure you use a page extension that your browser recognizes or it might 
not display the page properly. If you used the Custom Names dialog in Site view 
to assign a ﬁle name extension for an individual page, that customized extension 
overrides the site default for that page. 


6. Click OK. 


Setting HTML Options 


NetObjects Fusion includes a variety of options to control HTML format and 
generation. 


1. In any view, from the Tools menu, choose Options>Current Site. 


The Current Site Options dialog appears. 


2. On the General tab, click HTML Options. 
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The HTML Options dialog appears. 


3. Set the HTML formatting options. These settings do not affect the appearance 
of your site. The settings only affect the HTML code that is created when you 
publish the site. 


✦ 
Indentation. Select tabs or a speciﬁc number of spaces to indent lines of the 
code so it is easier to read. 


✦ 
Maximum compression. Select this option if you do not want site visitors to 
easily read your HTML code. If this option is selected, line breaks, tabs, and 
unnecessary spaces that make the code more readable are stripped from the 
generated HTML code. The generated HTML code uses as few characters as 
possible and the code will be unintelligible. To restore compressed code so 
you can read it, clear this option and republish the site. 


✦ 
Line breaks. Choose PC/Unix or Mac to set the line breaks in the code for the 
platform you expect to use to view the code. Your choice of line breaks does 
not affect the browser’s interpretation of the code regardless of the computer 
platform being used to view your site. 


✦ 
Word wrap. Select the number of characters per line of code before it wraps 
to the next line. This option enhances readability of the HTML code in text 
editors that do not automatically wrap text. However, this can cause text to 
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wrap in the middle of an HTML tag, which prevents code from working 
properly, and for some JavaScript code, you may need to deselect this option 
so the lines do not wrap. 


✦ 
HTML tags. Select whether the HTML tags are in uppercase or lowercase— 
such as <H1> or <h1>—in the generated HTML code. 


✦ 
Attributes. Select whether the tag attributes are in uppercase or lowercase— 
such as BGCOLOR or bgcolor—in the generated HTML code. 


✦ 
Use transparent GIF as spacer. Select this option if you want NetObjects 
Fusion to use a transparent GIF named clearpixel.gif to space items accurately 
on a page. If you generate tables on a page, NetObjects Fusion places 
invisible image ﬁles of varying widths and heights in the table cells to 
ensure accurate placement of objects. 


✦ 
Include HTML comments. Select this option to insert comments into your 
generated HTML code that makes reading it easier. For example, with this 
option selected, the comment <!--Start of the Body for this page--> appears 
before the <BODY> tag. 


✦ 
Include Generator meta tag. Select this option to identify the application that 
generated the HTML code. The name of the application appears in the 
code’s META tag. The default generator META tag for your site is 
NetObjects Fusion 7 for Windows. You can also manually enter information 
to use for the generator’s name in the box. 


✦ 
Include character set meta tag. Select this option to include the character set 
for the site in the META tag of each page. Normally you only use this option 
if your site uses a non-Western character set. 


✦ 
Background image offset. Select this option to compensate for the small 
borders most browsers add to the top and left sides of their windows. By 
selecting this option you can shift the image in NetObjects Fusion so the 
page content starts in the upper left corner of the page. Enter values in the 
Top and Left boxes to offset the background image. 


4. Click OK when you ﬁnish selecting HTML options. 
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Publishing Your Site 


The ﬁrst time you publish a site, you must publish the entire site. Later, when 
you’re ﬁxing problems or updating information, you can publish only the portion of 
the site that changed. 


Note: The site’s ﬁles are generated in the HTML output format that you specify in the Browser 
compatibility ﬁeld of the Current Site Options dialog. See Chapter 7, “Controlling 
Published Output.” 


Publish Site 


1. In Publish view, Site view, or Page view, click the Publish Site button on the 
control bar. 


The Publish Site dialog appears. 


2. From the Publish files to drop-down list, choose Local Publish to specify your 
local hard disk as the destination for the published HTML ﬁles. 


3. From the Pages to publish drop-down list, select the portion of the site you want 
to publish: 


✦ 
Entire Site. Publishes HTML ﬁles for all pages and associated assets for the 
site. Select Entire Site the ﬁrst time you publish a site. 


✦ 
Selected Page only. Publishes the page you select in the SiteStructure. Usually 
you use this feature if you make a change on one page and want to update 
that page’s HTML ﬁles. To re-publish a page, click the arrow (>>) to display 
the SiteStructure and double-click the page you want to re-publish. The page 
name appears in the ﬁeld. 
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✦ 
Site Section (selected page is parent). Publishes the HTML ﬁles for a complete 
section of the site. Click the arrow (>>) to display the SiteStructure. Double- 
click the base section page of the section you want to publish. The section 
name appears in the ﬁeld. 


Note: If you add a page to the site, or change the site’s directory structure after 
publishing, make sure you re-publish the entire site and not just a site section 
so all the links are updated. 


4. Select Publish changed assets only to publish the asset ﬁles that have changed 
since the last time you published the site. 


Note: NetObjects Fusion does not query your hard disk to see if it has all the 
unchanged assets needed by the site. If you publish changed assets only, be 
sure you publish to the same location on the hard disk that you did previously, 
so unchanged assets are still available. 


5. Click Publish. 


NetObjects Fusion creates the local directories, converts the site to HTML, and 
stores the site’s HTML ﬁles on the local hard disk. 


Note: Changes you make to the site while it is being stored are not included in the 
HTML ﬁles until you re-publish the page or section containing the changes. 


6. When publishing is complete and your site is in place, your browser opens so 
you can examine the results. You can return to NetObjects Fusion, make 
changes to the site, and re-publish the site or its changed portions as needed. 


When the site works perfectly, you’re ready to publish it to your ISP’s server, 
Web server, or other server that puts the site on the Web. Before you can publish 
to a remote server, however, you need to deﬁne a remote publish proﬁle. 
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Setting Up to Transfer Files to Your Web Server 


To put your site on the Web you must transfer its HTML ﬁles and related asset ﬁles 
from your computer’s local hard disk to a server that has access to the Web. This 
can be an ISP server that you use to access the Web, your company’s Web server, or 
any other server that gives you Internet access. 


NetObjects Fusion uses the FTP process to transfer your site’s ﬁles to the Web 
server. Therefore, to transfer to a remote Web server, your computer must connect 
using the FTP protocol unless that remote server is on your company LAN, in 
which case you can use the Local Publish option. 


Prior to transferring to the server the ﬁrst time, however, you must set up a proﬁle 
of the server to receive the transferred HTML ﬁles. 


The setup for a Web server also applies to an intranet server. If you’ll transfer a site 
from your hard disk to your company’s intranet server prior to transferring to the 
Web server, use the setup steps in this section for both your intranet server and Web 
server. 


The Server Setup Process 


To set up a server you select transfer options and deﬁne a proﬁle. After you select 
the appropriate options you don’t have to select them again. You just transfer the 
site from your hard disk to the server(s). If you change servers, you must select 
options and deﬁne a publish proﬁle for the new server. 


The setup process consists of selecting the directory structure, deﬁning the server 
proﬁle, and selecting publish components if necessary. These settings are saved in 
your Sitename.nod ﬁle so you don’t have to create a publish proﬁle each time you 
want to publish the site. 


When setup is complete, you can transfer ﬁles from a local directory to the remote 
server’s location. 


Publish Proﬁle Checklist 


Make sure you can answer the questions in the following checklist before you 
create a publish proﬁle for a remote server. 


1. 
Who is your service provider? This is the business, organization, or department that 
is going to store your site on its server and provide your site visitors access to it 
on the Web. 
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The technical support staff of your service provider should be able to provide 
the answers to the rest of these questions. Service providers and other 
organizations that provide hosting services often offer technical support pages 
on their own Web sites. 


2. 
What is the name of your FTP host? This is the name of the server that you are 
going to publish your site to. It might be the same as your domain name, such as 
www.yourname.com; a name assigned by the service provider, such as 
inbox.isp.com; or a speciﬁc IP address, a series of four numbers separated by 
periods. 


3. 
What is your directory? When you log on to your remote host, you automatically 
begin in the home directory for your log-in account. This might not be the right 
place to put your site, however. For a variety of reasons, you might need to 
publish your site in a subdirectory of your home directory. 


You must know the relative path from your account’s home directory to the base 
directory where your site should be stored. When NetObjects Fusion publishes 
your site and logs on to your service provider, it stores your site’s pages and 
assets in this base directory. You enter this path statement as the Directory in the 
Publish Settings dialog. 


You can create a new base directory below your initial base directory to publish 
and test a site without disturbing your existing site. For example, if the base 
directory is /Sitename/, you can create a new base directory as /Sitename/test/ and 
then run the site from that base directory to test it. 


However, the host and base directory might not look anything like the URL that 
your site visitors use to access your site. For security and other reasons, hosting 
services frequently name their host machines and user directories according to 
their own needs. 


Note: If you have your own domain, such as www.mycompany.com, and are 
logging in directly to the account that owns that domain, you might not need 
to specify a base directory, because the home directory of that account might 
be the same location as the base directory. 


4. 
What is the name and password for your account? You need this information so 
NetObjects Fusion can log on to the server and publish your site. 
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5. 
What is the preferred name for the default Home page? Your service provider 
determines what ﬁle name the server displays by default for each directory on 
the server. Most servers are conﬁgured to display by default any ﬁle named 
index; others default to home or default. You must match this preferred name in 
the Advanced Publish Settings dialog for remote server transfer. 


6. 
What HTML ﬁle name extension does your server support? Web page servers 
typically support .html, .htm, or .shtml as ﬁle name extensions. Some service 
providers map one to the other so the server recognizes all of them; others 
require you to use a speciﬁc one. You must set the Advanced Publish Settings 
dialog so NetObjects Fusion transfers ﬁles with the correct extension. You can 
also enter a custom extension, if your server supports it. 


7. 
Is a speciﬁc port required for upload? The service provider or hosting service might 
have designated a speciﬁc port on the server that it wants you to use to upload 
ﬁles. If so, you must specify this for NetObjects Fusion. See “Setting the Server 
Port and Permissions” on page 515. 


8. 
Does your log-in account have the necessary permissions? Servers use permission 
conﬁgurations to control what you are allowed to do while logged on—whether 
you can delete ﬁles, for example, or create new directories. 


In Publish view, you can specify the file and directory structure that you want 
NetObjects Fusion to create or use for your site by selecting Arrange Files from 
the Publish menu. Your log-in account—which NetObjects Fusion uses to store 
the ﬁles—must have the server permissions necessary to create the directory 
structure you deﬁned. 


If your service provider does not let you create directories, then you must use 
the Flat directory structure option to transfer and store your site. 


9. 
How much server space do you have? Before you publish your site to the Web 
server, check the size of the generated HTML ﬁles on your hard disk. The 
default location for the ﬁles is a folder named User Sites\Sitename\Local Publish. 
Make sure you include all the subfolders as well. Check that the space allocated 
on the Web server can accommodate all the ﬁles in the Local Publish folder. 


10. Does your server have security systems in place, such as proxies or ﬁrewalls? Firewalls 
and proxy servers can prevent NetObjects Fusion from uploading ﬁles properly. 
See “Publishing with Firewalls or Proxy Servers” on page 517. 
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Select the Directory Structure 


Many ISPs, hosting companies, and Web servers require Web site ﬁles to be 
arranged in a certain directory structure. NetObjects Fusion supports the three most 
popular directory structures used by ISPs and Web servers, but you should check 
with your service provider to determine which structure to use. 


If your ISP or Web server has special requirements for a site’s directory structure, 
you can customize the site directory structure in Publish view. See “Customizing 
Your Site’s Directory Structure” on page 508 for information. 


When you publish your site to a Web server, you specify the directory structure of 
your ﬁles and assets on the server. Setting the directory structure for your site does 
not change the structure that the site visitor sees, nor does it affect the links between 
pages and assets. It simply speciﬁes the path names where your pages and assets are 
stored on the server, and what URL is required to access them. For example, some 
servers require a one-level structure, with all pages, images, and other assets in the 
same directory; others let you set up your own directories. 


NetObjects Fusion provides three pre-conﬁgured directory structures: 


✦ 
Flat for servers that require all resources and assets to be in a single directory. 
Many commercial ISPs and hosting companies require this kind of structure. 


✦ 
Asset Type arranges your site contents into folders according to their asset type. 
This is the default setting in NetObjects Fusion. For example, if your site 
contains a typical mix of text and media, a structure set by Asset Type arranges 
your contents into the structure shown below. 


✦ 
Site Structure arranges your site contents into a directory arrangement that looks 
like your site in Site view: 


✧ Your Home page and its assets are stored in the site’s root directory. 


✧ Each ﬁrst-level page is stored in its own folder with its assets. 
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✧ Any child page is stored with its assets in a subfolder beneath the folder that 
contains its parent page. You determine the maximum number of subfolders 
by setting the Number of Levels option. 


For example, a structure set with the by Site Structure option would have this 
directory arrangement on the server. 


The Site Structure setting creates an efﬁcient ﬁle structure, allowing the server 
to load your pages quickly in a site visitor’s browser. It also provides an 
effective directory structure for search engines, which might index only one 
page per folder. 


If you apply the Site Structure setting, shared assets are stored in the deepest 
folder common to all pages that use that asset. This makes the shared access to 
those assets as efﬁcient as possible. 


To set the directory structure for a site: 


1. In Publish view, from the Publish menu, choose Arrange Files. 


2. Choose by Site Structure, by Asset Type, or by Flat. See page 497 for 
descriptions of the choices. 
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If you want to customize the structure, select the option that produces the 
structure similar to the one you’ll create. See “Customizing Your Site’s 
Directory Structure” on page 508. 


If you choose Site Structure, a dialog appears so you can set the number of 
levels of subdirectories for your site. If Site Structure is already selected, choose 
it again to see this dialog and set the levels. 


Click the up and down arrows in the dialog to set the number of levels. Click 
OK. 


3. If you customized the directory structure, but want to reset it to one of the menu 
options, choose Clear All Customizations. The directory structure is reset to the 
option currently selected on the Arrange Files menu. 


NetObjects Fusion removes custom folders and changes all customized asset 
names back to the original names. 


4. Click Yes to accept the new structure. 


The directory structure is revised and displayed in Publish view. 


Deﬁne Server Proﬁles 


Each Web server has a name and a set of properties that deﬁne the connection 
settings NetObjects Fusion uses to publish your site to that location and server. You 
can select a server or set its properties any time before you publish. The publish 
proﬁle is stored in the Sitename.nod ﬁle. 


NetObjects Fusion includes one default server proﬁle, Local Publish, which is on 
your local hard disk in the My Computer\Drive\NetObjects Fusion\User 
Sites\Sitename\Local Publish directory. See “Setting Up to Publish Locally” on 
page 488 to modify the settings for publishing to your local hard disk. 
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You can modify the default proﬁle, create your own, or delete unneeded proﬁles. 
You can also create a global copy of a proﬁle, which makes the proﬁle available 
across different sites. 


The information needed to connect to a remote server is speciﬁc to your server. 
Contact your ISP, hosting company, or Web server administrator for the precise 
information to enter in these ﬁelds. For guidance on the questions you need to ask, 
see “Publish Proﬁle Checklist” on page 494. 


To deﬁne a remote server proﬁle: 


Publish Settings 


1. In Publish view, click Publish Settings on the control bar. 


The Publish Settings dialog appears. It is the same dialog you used to set up 
your local publish profile. 


2. Click New proﬁle. 


3. Select Remote or a Global proﬁle and click OK. 


4. Select a proﬁle from the Select Proﬁle drop-down list. 
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Note: Although many ISPs and hosting companies use a single server to receive FTP 
ﬁles and provide Web hosting, the service you use may have separate servers 
for receiving FTP ﬁles and Web hosting. Select the FTP server to receive your 
transferred ﬁles. Check with your ISP administrator for the correct server to 
select to receive your ﬁles. 


5. Enter a name that identiﬁes the server in the Proﬁle Name box or use the default 
name. 


6. Enter information in each ﬁeld in the Remote section. 


✦ 
FTP Host is the name or IP number you use to connect to the remote server. 
This can be your site’s domain name, the name of an intranet server, or the 
name of your ISP’s server. Conﬁrm this information with your ISP 
administrator or server administrator. 


✦ 
Directory is the location on the remote server where your site’s HTML ﬁles 
are stored. 


✧ Leave this ﬁeld blank if your site’s Home page should be stored in the 
home directory of the user ID or server account that you use to transfer 
your site to a remote server. 


✧ If you want your site’s Home page to be stored in a different directory 
than the home directory, enter the path to the Home page here, such as 
/public_html/user. 


For more information about the directory setting, see “Publish Proﬁle 
Checklist” on page 494. 


✦ 
User name is the name you use to log on to the remote server so you can 
transfer ﬁles to it. 


✦ 
Password is the password that authorizes you to access the server. To publish 
to the remote server, you need server permissions for adding ﬁles and 
creating directories. If you do not enter a password in this box, a dialog 
appears when you publish the site. You enter the password in that dialog. 
You can also select an option for NetObjects Fusion to remember your 
password so you don’t have to manually enter it each time you publish ﬁles. 
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7. Click Advanced publish settings. 


8. Select the options for your site. 


✦ 
Home page ﬁle name. Index is the default page name recognized by most Web 
servers. Select Current Page Name to set the Home page to use the same 
name as in Site view. Select Home or Default to set the page as in Home.html 
and Default.html. 


✦ 
File extension for HTML pages. Select .htm, .html, or .shtml depending on the 
page extension your browser recognizes. That extension is applied to all 
HTML ﬁles for each page in your site. Click the up and down arrows to see 
all the options. To add an extension to the list, click the browse button. 


Your service provider or hosting company can tell you which extension to use 
for the Web server. 


Make sure you use a page extension that your browser recognizes or it might 
not display the page properly. If you used the Custom Name dialog in Site view 
and a ﬁle name extension for an individual page, that customized extension 
overrides the site default for that page. If pages do not seem to publish with the 
correct extension, custom names that you applied to the pages may be incorrect. 
Check the names of the affected pages. 


The Aliases and Advanced FTP tabs are for advanced setup options. See 
Chapter 31, “Advanced Publishing.” 


To create additional publish proﬁles, click New proﬁle and repeat the process. 
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To edit an existing publish proﬁle, select it from the Select Proﬁle drop-down 
list, make the changes, and click OK. 


To delete an existing proﬁle, select it from the Select Proﬁle drop-down list, 
click Remove proﬁle, and click Yes to conﬁrm deletion. 


9. Click OK. 


You’re now ready to publish your site. 


Creating a Global Publish Proﬁle 


NetObjects Fusion saves publish proﬁles with the site you are publishing. If you 
want to use the same proﬁle to publish several different sites, you can create a 
global copy of the proﬁle, which makes it available to all the sites you build. 


To create a global publish proﬁle: 


1. Create a publish proﬁle as described in “Deﬁne Server Proﬁles” on page 499. 


2. In the Publish settings dialog, click Save as Global Proﬁle. 


The Save Global Proﬁle As dialog appears. 


3. In the Proﬁle name ﬁeld, type a name for the proﬁle or accept the name you 
assigned in the Publish Settings dialog. 


4. Click Save. 


This publish proﬁle will be available for use for all sites you build. 
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Publishing Components 


If you installed third-party Publish components, you can choose to publish or not 
publish them. These components generally perform post-publish processing of the 
generated HTML ﬁles. 


1. In Publish view, from the Publish menu, choose Publish Components. 


The Publish Setup dialog appears with a list of available components. 


NetObjects Fusion 7.5 does not include Publish components by default, so if 
you do not install third-party components, such as NetObjects Fusion 
Connector for Macromedia ColdFusion, this dialog is blank. 


2. Select a component to include it with your site’s HTML ﬁles when they are 
transferred. 


3. Click OK. 


Viewing a Server’s Contents 


Prior to transferring ﬁles to the server, you may want to see which ﬁles are already 
on the server and the dates they were modiﬁed. 


To see a server’s contents: 


1. In Publish view, from the Publish menu, choose View/Delete Server Contents. 


2. Choose the server you want to review. 


If you choose your local hard disk or a server on an intranet, the Local Publish 
window opens and displays the ﬁles and folders stored in the local directory 
created for the site. 


If you choose a remote server, the Server Contents dialog appears and shows a 
similar listing. You can delete ﬁles in the Server Contents dialog. 


3. Check the folder and ﬁle names and the modiﬁed dates to determine which 
folders and ﬁles you want to save or delete before transferring new HTML ﬁles 
to the server. 
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Transferring Your Site to the Web 


To put your site on the Web, you transfer it to your ISP or Web server. When the 
publish process is complete, your site is available to the world. 


To transfer your site’s HTML ﬁles: 


1. From the Publish menu, choose Transfer Files to Server. 


The Transfer Files dialog appears. 


2. From the Transfer ﬁles from local directory drop-down list, select the name of 
the local directory where you published and saved the site’s HTML ﬁles. This is 
usually the Local Publish selection for your local hard disk, or an intranet server 
where you initially generated the HTML ﬁles. 


3. From the Transfer ﬁles to remote server drop-down list, select the publish 
proﬁle where you want to transfer the ﬁles. 


If you need to deﬁne a new publish proﬁle before transferring the ﬁles, click the 
pencil icon next to the drop-down lists. The Publish Settings dialog appears. 


4. Click OK. 


NetObjects Fusion generates a temporary copy of the site, connects to the 
remote server using the settings in the publish proﬁle, and uses its internal FTP 
program to transfer the site’s HTML ﬁles and directories to the remote server, 
using the ﬁle and directory structure you specify. 


While NetObjects Fusion is transferring the published site to the server, you can 
select a different view and continue working. You cannot open a different site. 


Note: Changes made to the site while it is being transferred are not automatically 
made in the published version. 
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Transferring Your Site to the Web 


When the transfer is complete and your site is in place, open it in your browser and 
examine the results. 


That’s it. Your site is on the Web and available for the world to see. 


See Chapter 31, “Advanced Publishing” for more publishing options. 
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Advanced Publishing 
31 


NetObjects Fusion provides a range of advanced features to deal with a variety of 
Web publishing requirements. For example, some Web servers require special 
directory structures to host a Web site. In addition, some complex sites may need 
additional publishing settings to make the site function properly. 


This chapter describes: 


✦ Customizing your site’s directory structure 


✦ Creating aliased folders and setting the cgi-bin directory 


✦ Setting the server port and permissions 


✦ Publishing special assets 
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Customizing Your Site’s Directory Structure 


Although NetObjects Fusion offers three preconﬁgured directory structures, you 
might need to customize your site’s directory structure further. Customizing the 
site’s directory structure is usually only necessary if your ISP or host server 
requires a speciﬁc structure for Web sites. You can customize the site’s directory 
structure in Publish view by renaming, rearranging, or deleting site folders, creating 
custom folders, or changing the publishing properties for folders, pages, and assets. 


A C in the Attributes column of an item in Publish view indicates the item was 
customized. For example, a directory with a new name or a ﬁle moved from one 
directory to a new directory displays a C in the Attributes column. 


Note: Customizing your directory structure does not change the appearance, design, or 
content that your site visitor sees; it only controls how the pages and assets are stored 
on the server, and the URL to access the site’s interior information. 


NetObjects Fusion saves the customized directory structure in the Sitename.nod ﬁle 
so you don’t have to reconﬁgure the structure each time you generate the site’s 
HTML ﬁles or transfer them to a server. 


Creating a Custom Folder 


1. In Publish view, select the folder, page, or asset where you want to add a custom 
folder, right-click, and select New Folder from the shortcut menu. 


NetObjects Fusion adds a custom subfolder named New Folder below the selected 
folder or ﬁle. 


2. Enter a new name for the folder and press Enter or select another object to 
record the folder name. 


3. Drag other folders or ﬁles into the custom folder as needed. 
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Renaming Folders and Files 


1. In either pane of Publish view, right-click the folder or ﬁle and select Rename 
from the shortcut menu. 


2. Edit the existing object name or enter a new name. Press Enter or select another 
object to record the new name. 


You can rename auto-generated folders and ﬁles if they are not locked. NetObjects 
Fusion auto-generates names of images that you modify in Page view. For example, 
if you crop an image or set it to be transparent, NetObjects Fusion auto-generates a 
new name for the altered image. Auto-generated image names are in the format of 
a_ﬁlename.ext where a stands for auto-generated, ﬁlename is the name of the original 
image, and ext is the extension of the image, .gif or .jpg. Auto-generated image 
names only appear in Publish view. 


NetObjects Fusion remembers the new names the next time you generate the 
HTML ﬁles for your site. Any folder or ﬁle that you rename is considered 
customized. If you name a customized folder with a name used by an auto- 
generated folder, it is still treated as a customized folder. 


Aliased folders are also considered customized folders. Publish view displays them 
in the directory structure, even if they are empty, and tracks their name and location 
in the event you change them. See “Creating Aliased Folders and Setting the CGI- 
Bin Directory” on page 512. 


By deﬁnition you cannot change read-only assets, such as script ﬁles and directory 
ﬁles used by NetObjects Fusion Components. NetObjects Fusion ignores attempts 
to move or rename read-only ﬁles. An R attribute and lock symbol in the directory 
structure indicate a read-only ﬁle. 


Deleting Folders 


1. In either pane of Publish view, click the folder you want to delete and make sure 
it is empty. You cannot delete a folder until it is empty, and you cannot delete 
pages or assets in Publish view. 


2. Right-click the folder and select Delete Folder from the shortcut menu. 


NetObjects Fusion deletes the folder. 


NOF7.5UG~1.BOO Page 509 Thursday, January 21, 1904 11:14 PM 


510 


Customizing Your Site’s Directory Structure 


Rearranging the Directory Structure 


➲ In either pane of Publish view, click the folder, page, or asset you want to move 
and drag it to its new location. 


NetObjects Fusion moves the object and updates all references and links to it. 


If you move pages, NetObjects Fusion remembers their new locations, but might 
continue to auto-generate folders needed to contain that page’s assets. Components 
and their related assets have a black lock image on their icons, signifying that they 
cannot be renamed or rearranged. 


Viewing and Setting Publishing Properties 


In addition to their other properties, your site’s folders, pages, and assets have 
publishing properties that indicate or control the way they are included in your 
published site. 


Three of these publishing properties indicate the publishing status for that folder, 
page, or asset: 


✦ Folders, pages, and assets that were renamed or moved from their default 
location have a customized publication property. Customized assets display a C 
in the Attributes column in Publish view, and a checkmark in the Customized 
option in the Attributes section of the Properties dialog. To see the Properties 
dialog for a customized asset, select the asset in either pane of Publish view and 
from the Publish menu, choose Properties. 


✦ Some folders, pages, and assets are marked read-only: 


✧ Assets created by NetObjects Fusion components such as Site Mapper. 


✧ Dependent Java .class ﬁles that were added to the site’s assets. When you add 
a Java object and preview or publish your site, NetObjects Fusion analyzes 
the object’s .class ﬁle to see if it calls for other .class ﬁles; if so, those 
dependent .class ﬁles are added as read-only assets. 


Read-only assets display an R in the Attributes column in Publish view, and a 
check in the Read-only option of the Properties dialog. 


✦ Pages and assets have two published date properties that display the latest 
publication date in both the Last Remote Publish and Last Local Publish 
columns of Publish view. 
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✧ If an asset was never published locally or remotely, it displays Never 
Published in red in the appropriate column, and has a check in the Needs 
publishing option of the publication Properties dialog. HTML ﬁles always 
appear in red. 


✧ If an asset was changed since the last time it was transferred to the server, it 
displays the Last Published date in red, and has a check in the Needs 
publishing option of the publication Properties dialog. If you select Publish 
changed assets only when you publish this site, the assets with red dates are 
republished to the server. Pages always appear red because they are always 
republished unless you speciﬁcally choose not to publish a page. 


To see the publication properties of a folder, page, or asset listed in Publish view: 


1. Right-click the item. 


2. Select Properties from the shortcut menu. 


The Properties dialog for the selected item appears. 


Suppressing a Page or Asset from the Published Site 


You can also suppress publishing for a selected page or asset by setting its Don’t 
publish property. If you set this property, NetObjects Fusion: 


✦ Overrides the Needs publishing or Publish changed assets setting for this page 
or asset. 
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✦ Displays a diagonal red slash mark through the page or ﬁle icon in Publish view 
and adds a D to its Attribute column. 


✦ Publishes the site without that page or asset. 


To suppress publishing for a page or asset: 


1. In Publish view, right-click the page or asset and choose Properties from the 
shortcut menu. 


The Properties dialog appears. 


2. Select Don’t publish, then click OK. 


NetObjects Fusion displays a red slash through the page or asset icon and 
suppresses it from the site when published. 


To re-enable publishing for a suppressed page or asset, repeat step 1, clear Don’t 
publish, and click OK. 


Note: This Don’t publish command is not the same as the Don’t publish command in Site 
view. Selecting the Don’t publish command in Site view eliminates the pages and all 
links to it from the published site. In Publish view, the Don’t publish command does not 
eliminate the page from the published site. The page is simply not generated again and 
not recopied to the site. The page and all links to it remain. The images and assets of 
the page may be republished, but the page will not. 


Creating Aliased Folders and Setting the CGI-Bin 
Directory 


Sometimes you need to store certain assets of your site in a location separate from 
the rest of your site. For example: 


✦ You can link to programs such as CGI scripts or other executables that have to 
be placed in a speciﬁc CGI directory so they run properly. 


✦ You can place an order form or other pages in a secure location that requires 
authorized access, without restricting access to the rest of your site. 


✦ You can link to images or other assets that are maintained or controlled by 
others, and stored in a protected location. 


Note: You cannot do this with NetObjects Fusion’s Form Handler component. 
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To do this, you create alias folders, using a process in which you deﬁne two 
locations: the actual physical location on your Web server where you want to 
transfer the pages or assets, and the URL or logical address that you want 
NetObjects Fusion to use when referring to that object. On some servers, this is 
referred to as creating virtual folders. 


After the site is transferred to the Web server, you or your server administrator must 
conﬁgure the server to look in the FTP location for assets that are described as 
being in the URL location. For example, your site might include several stock 
images from your company’s marketing department, such as the company logo and 
other approved artwork. When you create your site, you use copies of the artwork 
that you stored on a local disk. When you transfer your site’s HTML ﬁles to the 
company server, however, you want to use the “ofﬁcial” images that have been 
approved and maintained by the marketing department. 


Check with your server administrator to see if your site contents or remote server 
conﬁguration requires a CGI directory or other aliases. 


To specify the CGI-BIN directory: 


Publish Settings 


1. In Publish view, click Publish Settings on the control bar. 


The Publish Settings dialog appears. 


2. Choose a proﬁle from the Select Proﬁle drop-down list. 


3. Click Advanced publish settings. 


The Advanced Publish Settings dialog appears. 


4. Click the Aliases tab. 
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Creating Aliased Folders and Setting the CGI-Bin Directory 


5. Enter the FTP path where CGI scripts are stored in the CGI alias ﬁeld. This 
establishes an alias to the executable directory on the server where CGI scripts 
are kept. 


To create other aliased folders: 


1. In Publish view, arrange the directory structure for your site the way you want it 
to appear on your server. 


2. Isolate the pages or assets you want to store in an aliased location into one 
branch of the directory structure, under a common parent folder. If necessary, 
create a custom folder for each set of aliased content. 


If your site requires more than one alias—such as one alias for secure pages and 
another alias for protected assets—you can create more than one custom folder. 


3. Drag pages and assets into the appropriate custom folder(s) as needed. 


Publish Settings 


4. Click Publish Settings on the control bar. 


The Publish Settings dialog appears. 


5. Choose a proﬁle from the Select Proﬁle drop-down list. 


6. If necessary, make changes to that proﬁle. 


7. Position the Publish Settings dialog so you have a clear view of the Contents of 
directory pane in Publish view. Refer to the directory structure to make sure you 
type the URL to your custom folder correctly. 


8. Click Advanced publish settings and then click the Aliases tab. 


9. To add a new alias, click the New Alias button. To edit an existing alias, select it 
from the list, then click the Edit Alias button. 


The New Alias (or Edit Alias) dialog appears. 


10. Enter the absolute or relative path from your site’s root folder to the custom 
folder containing the aliased pages and assets as the URL Path. 
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Refer to the directory panel as needed to enter the path exactly as it appears, 
including the use of uppercase and lowercase names and spaces. For example, if 
you create a custom folder called Companypix and place it under your Assets 
folder, the URL Path would be./Companypix. 


11. Enter the FTP path that you want to use to actually store that folder and its 
contents. This FTP location must be on the same server as the rest of the site 
because your publish proﬁle only logs onto one server at a time. 


12. Click OK. 


13. To add additional aliases, click New Alias again and repeat the process. 


When you publish your site, NetObjects Fusion keeps all links and references to 
your aliased content pointing toward the URL path, but actually stores the pages 
and assets in the FTP location you speciﬁed. 


Note: The server must be conﬁgured to support this alias. This is a system administrator task 
outside of NetObjects Fusion, so you or your server administrator must deﬁne the alias 
on the server. 


Setting the Server Port and Permissions 


Depending on your Web server conﬁguration, you might need to set speciﬁc 
permissions or a speciﬁc port so your Web server software can access your site’s 
HTML ﬁles. Setting permissions might override the default permissions normally 
set by NetObjects Fusion. The permission settings only apply to FTP servers that 
support the CHMOD command. Windows IIS servers do not support the CHMOD 
command, therefore to change the permissions on a Windows IIS server, see your 
server administrator. 


To set the server port and permissions: 


Publish Settings 


1. In Publish view, click Publish Settings on the control bar. 


The Publish Settings dialog appears. 


2. Choose a proﬁle from the Select Proﬁle drop-down list. 
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3. Click Advanced publish settings and then click the Advanced FTP tab. 


4. Select options for the Advanced FTP settings: 


✦ 
Server port is the port from which your server accepts FTP connections. By 
default the port setting is 21, which is the most common ISP setting. 
However, some security systems or other server conﬁgurations may require 
a different setting. Check with your ISP administrator for the proper server 
port setting. 


✦ 
Default Permissions applies to servers that support the CHMOD FTP 
command, which covers read, write, and execute permissions. By default, 
this setting is 0 (zero), which corresponds to no permissions. Check with 
your ISP administrator or server administrator to see if the server supports 
the CHMOD command and, if it does, which setting you need. Note that the 
setting applies to all ﬁles and folders uploaded to the server. You cannot set 
some ﬁles or folders to one set of permissions and others to different 
permissions. 


✦ 
Connect passive mode is for publishing to servers not within your company’s 
ﬁrewall, or if your ISP or host company’s FTP manager establishes 
connections using passive mode. Passive mode (or PASV) is a security mode 
in which a client sends a connect signal for data, the server replies with a 
conﬁrmation signal, and then the data begins uploading. This allows the 
server to conﬁrm the identity of the client that is connecting before data 
begins uploading. Although some ﬁrewalls allow PASV as a security mode, 
others may not be conﬁgured for PASV. In that case, publishing will not 
work. Typically, NetObjects Fusion cannot publish through ﬁrewalls or 
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proxies. If a message tells you that NetObjects Fusion cannot connect to the 
server, the problem is usually a ﬁrewall preventing you from logging on. 
Also, in some cases of publishing to a proxy server, the publishing process 
appears to succeed but the ﬁles do not appear on your site. 


5. Click OK. 


Publishing with Firewalls or Proxy Servers 


If you develop sites behind a ﬁrewall and need to publish to a remote server that is 
outside the ﬁrewall, you might be able use FTP passive mode to connect to the 
server. 


Publish Settings 


1. In Publish view, click Publish Settings on the control bar. 


2. Choose a proﬁle from the Select Proﬁle drop-down list. 


3. Click Advanced publish settings and then click the Advanced FTP tab. 


4. Select Connect passive mode. 


5. Click OK. 


If the reverse is true and your remote server is behind a ﬁrewall or stored on a proxy 
server, NetObjects Fusion cannot publish directly to the server. If that’s the case, 
follow these steps: 


1. Publish your site to a local folder other than the \Sitename\Preview folder of your 
site. Use whatever directory structure and HTML output method you would 
normally use. The default setting, Local Publish, publishes to the folder 
\Sitename\Local Publish. 


2. Consult with your server administrator for the preferred method of transferring 
content to the remote server. Potential methods include: 


✦ Transferring the entire directory structure of the local site to a holding 
location on an unprotected server, so an authorized administrator can then 
transfer the site to the protected location. 


✦ Using an FTP application such as WS-FTP or other means of access 
authorized by the server administrator to transfer the entire directory 
structure of the local site to the protected server. 


✦ Installing Personal Web Server (PWS) and remotely publishing to it. Then 
you send the site’s ﬁles via FTP from PWS to the server. 
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Whichever method you use, be sure to transfer all ﬁles and to duplicate the local 
folder structure precisely. 


Publishing Special Assets 


When you transfer your site to the Web server, NetObjects Fusion transfers the 
entire site to the designated location, including special assets you tell it to manage. 
These special assets include things like Java classes, images and assets contained 
on external HTML pages, and CGI scripts. The list of managed assets included in 
your published site is displayed in Assets view. 


When you transfer the site’s ﬁles to the Web server, you can use any of three 
methods to ensure that the special assets are included in your site’s managed assets. 


✦ Include the assets when you add the object that refers to them. For example: 


✧ If you reference external HTML pages using the External HTML tool, 
NetObjects Fusion analyzes the external pages and, if it ﬁnds assets in the 
external pages, includes those assets in Assets view. 


✧ If you add Java objects to your pages using the Java tool, NetObjects Fusion 
analyzes their .class ﬁles and adds other .class ﬁles referenced there. If you 
listed additional ﬁles on the Java Properties palette, NetObjects Fusion 
includes them as managed assets. See “Inserting a Java Applet or Servlet” 
on page 344. 


✦ You can reference an asset in a ﬁle link and NetObjects Fusion manages and 
publishes the asset. See “Creating a File Link” on page 293. 


✦ You can explicitly add any special asset to Assets view and select Always 
publish ﬁle to ensure that NetObjects Fusion manages and publishes the asset. If 
you select Always publish ﬁle and do not move the ﬁle in Publish view, and then 
only publish a section of the site, NetObjects Fusion places this asset at the root 
of the site. See “Adding a File Asset” on page 472. 


Managing Script Assets 


NetObjects Fusion does not analyze custom scripts that you add to pages, 
MasterBorders, or other objects. If those scripts reference special assets, they are 
not automatically included in the site’s managed assets. To have NetObjects Fusion 
manage and publish assets called in custom scripts, you must create ﬁle links to 
those assets, or explicitly add them to Assets view. 
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When you add the ﬁle asset, select Always publish ﬁle to ensure that the asset is 
marked In Use. After publishing the ﬁrst time, you can clear this setting if you only 
publish changed assets. 


Scripts have very speciﬁc calls to those ﬁles, generally ./imagename.gif, image.gif, 
or images/imagename.gif for images and cgi-bin/form.cgi, complete http path to 
form.cgi, or ./form.cgi for .exe ﬁles. 


✦ When you add an asset and the directory structure is set to by Asset Type, the 
added asset is always added to the assets/images folder. 


✦ If you add an asset and the directory structure is set to by Site Section, the added 
asset is always placed in the root if it is an image, or in the existing cgi-bin if it 
is an .exe. 


✦ If the directory structure is set to by Flat, the asset is added to the root. 


Be sure to move the added asset to the correct location in Publish view so the ﬁle is 
published to the correct location on the server. 
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Working with Character 
Sets 
AE 


In the past, most computers used the same character set to represent upper and 
lowercase English language letters, number characters, and punctuation characters. 
This character set is known as ASCII. However, ASCII is a very limited character 
set, unable to support a variety of alphabets. To accommodate computer users 
worldwide, different character sets were developed. These new character sets are 
often identiﬁed by a number, such as code page 850 or ISO-8859-1. 


Character sets are composed of code points, which are the numbers assigned to 
characters that the computer uses to identify the character. For example, in ASCII, 
when you type a capital A, the computer sees its code point, which is the number 
65; if you type a B, the computer sees a 66. Both the code page 850 and the ISO- 
8859-1 character sets include accented characters, but 850 uses the code point 130 
for the character é, and 8859-1 uses 233 for the same character. To eliminate this 
confusion, an effort is underway to create a universal character set that includes 
every character from every language. This character set is called Unicode. 


Characters display correctly in NetObjects Fusion because they are stored in 
Unicode. When NetObjects Fusion publishes or previews a page, it converts the text 
from Unicode to the character set selected for the site or for the individual page. 


Suppose you type Greek characters on a page, set the page character set to Western 
European (ISO-8859-1), and preview the page. Because their particular code points 
do not have equivalents in the Western European character set, the Greek characters 
may appear as question marks. If you want to guarantee that the Greek characters 
on the NetObjects Fusion page display correctly when you preview or publish, you 
should choose a character set that includes Greek characters. This character set is 
then inserted in the charset parameter in the generated HTML META tag, which 
tells the browser how to interpret and display the characters. 


If you have a page that contains languages that use different character sets, for 
example, English on the right and Greek on the left, to guarantee that all characters 
will be interpreted correctly by the browser, you can use Unicode (UTF-8) or two- 
byte Unicode (UCS-2) as a character set for the page. Remember that Unicode is 
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evolving; it is not complete yet, but it does include code points for most characters 
in languages commonly used on computers today. Note that only Netscape 4.x and 
Microsoft Explorer 4.0 and up currently support UTF-8, and only the most recent 
versions of Netscape and Microsoft Explorer support UCS-2. 


Available Character Sets 


The following character sets are included with NetObjects Fusion: 


✦ Baltic (CP-1257) 


✦ Central European (ISO-8859-2) 


✦ Central European (Windows-1250) 


✦ Chinese Simpliﬁed (GB2312) 


✦ Chinese Traditional (BIG5) 


✦ Cyrillic (ISO-8859-5) 


✦ Cyrillic (KO18-R) 


✦ Cyrillic (Windows-1251) 


✦ Greek (ISO-8859-7) 


✦ Greek (Windows-1253) 


✦ Japanese (EUC-JP) 


✦ Japanese (ISO-2022-JP) 


✦ Japanese (SHIFT_JIS) 


✦ Korean (KSC5601) 


✦ Turkish (ISO-8859-9) 


✦ Turkish (Windows-1254) 


✦ Unicode (UCS-2) 


✦ Unicode (UTF-7) 


✦ Unicode (UTF-8) 


✦ Western European (CP437) 


✦ Western European (CP850) 


✦ Western European (ISO-8859-1) 


✦ Western European (ISO-8859-15) 


✦ Western European (Windows-1252) 
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The following character sets are not included with NetObjects Fusion, but are 
supported once installed in your operating system. You can download language kits 
at www.microsoft.com or install them from your Windows NT installation disks. 


✦ Western European (CP-437) 


✦ Western European (CP-850) 


✦ Central European (CP-852) 


✦ Cyrillic (CP-866) 


✦ Greek (CP-869) 


✦ Greek (CP-737) 


✦ Turkish (CP-857) 


Setting the Site’s Character Set 


1. In any view, from the Tools menu, choose Options>Current Site. 


2. On the General tab of the Current Site Options dialog, select a character set 
from the Character set drop-down list. 


To ensure that characters display properly: 
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Setting the Character Set for an Individual Page 


1. Load a localized operating system. For example, for a Cyrillic site, you must 
use a Cyrillic OS. 


2. Set the site’s character set. 


3. Change the font for each SiteStyle element on the Graphics tab. This includes 
banners, buttons, and so on. 


4. Publish the site to see the correct characters in NetObjects Fusion and the 
browser. 


If you type characters that are not included in the selected character set, when you 
preview or publish the page, you might see question marks in place of unknown 
characters. 


Setting the Character Set for an Individual Page 


You can override the default site character set and choose a different character set 
for individual pages. 


1. In Page or Site view, right-click on the page and select Page Character Set from 
the shortcut menu. 


2. Select a character set for the page from the Page Character Set drop-down. This 
character set will be applied only to this page. 


Setting the Character Set for a Section 


1. Go to Site view and select a section. 


2. Right-click the parent page of the section and select Section Character Set from 
the shortcut menu. 
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3. Select a character set for the section from the Section Character Set drop-down. 


Setting the Character Set for Imported Pages 


When you import a site into NetObjects Fusion, you must ensure that it has the 
correct character set before you begin the import. 


1. From the Tools menu, choose Options>Application. 


2. In the Application Options dialog, click the International tab. 


3. In the Imported HTML section of the dialog, select a character set for imported 
text from the drop-down list. 


If you know the HTML pages in the site you are importing have the appropriate 
character set speciﬁed in the META tag, you can use the Speciﬁed in imported 
Meta tag setting. If, however, you know the site is in Greek and the correct 
character set is not speciﬁed in the META tag, then before importing you should 
choose an appropriate character set from the drop-down list. 


If there is no character set speciﬁed in the META tag, and you forget to set the 
correct character set before importing, NetObjects Fusion assigns the 
ISO-8859-1 character set. 
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URL and Page Name Character Requirements 


URL and Page Name Character Requirements 


The characters in a URL are limited to those represented in lower ASCII, which 
includes uppercase and lowercase English letters, numbers, and common English 
punctuation. You cannot use accented characters or other special characters in a 
URL. 


You can, however, name pages using accented characters. The names on the banner 
and buttons display in the correct international form. In Publish view, however, ﬁle 
names, page names, and folders change to names with unaccented characters. 


For Japanese, NetObjects Fusion uses the ASCII characters that are normally 
converted to a Japanese character. For other Asian languages, a numeric ﬁle name is 
assigned. For European languages, NetObjects Fusion strips out the accents; the 
words look the same but without accents. For example, if you name a page été in 
Site view, in Publish view it is listed as ete.html. 
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A 
A HREF 387 
Action icon 76 
actions 351 


action messages 352, 356 
adding to objects 353 
adding to text 358 
assigning to banners 278 
assigning to navigation bars 267 
button rollover example 368 
cascading 362 
cascading message example 371 
collision detection example 370 
custom message example 370, 371, 373 
custom messages 360 
customizing Set Action dialog 377 
deactivating 364, 367, 376 
delay example 374 
deleting/modifying 364 
dragging example 370 
examples 368 
parameters 357, 366 
reordering 364 
restrictions with frames 351 
scripting your own 365, 366 
slide show example 373 
targets 352, 355, 362 
trigger events 352, 354 


ActiveX controls 349 
Ad Banner component 410 
Adobe Acrobat PDF files 340 
Advanced toolbar 81 
aif files 337 
aliased folders 509, 512 
aligning 


objects 87 
text 174 


alt tags 


adding and modifying 84 


Anchor icon 75, 288 
anchors 


adding 287 
deleting 287, 288 
editing 287, 288 
external HTML 387 
see also links 


animated .gif files 182 


SiteStyles 254 


animation, see video files 335 
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APPLET CODE 388 
application options 


international 25 
preview 22 
updates 27 


Application Options dialog 
arrows, see lines 
asset type directory structure, publishing 497 
assets 


custom HTML 447 
custom names 473 
customized 510 
data objects 480 
displaying pages containing file assets 474 
displaying pages containing links 479 
editing 84 
file 471 
file types 471 
import limitations 67 
links 477 
managing external HTML 387 
managing script 518 
publishing external HTML 389 
publishing special 518 
reusing 83 
unmanaged 389 
variables 481 
see also file assets, links, variables 


Assets folder 17 
Assets view 8, 470 
au files 337 
audio file formats 336 
Auto save preference 20 
auto updates 27 
AutoFrames 137 


adding 138 
adding HTML/scripts 455, 459 
browser refresh 144 
defined 135 
optimizing layout 102 
padding 141 
properties 141 
removed from MasterBorders, effect on HTML 456 
selection sequence 139 
setting background 142 
spacing 141 
table structure 102 
targeting links in 143 
using with actions 351 
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see also frames 


auto-generated image name 509 
automatic 253 
automatic formatting 148 
automatic setting 149, 162 


B 
background 


AutoFrames 142 
frames 142 
Layout Region 114, 123, 224, 229, 276 
page 114, 123, 224, 229, 276 
sounds 115 
table 224 
table cell 229 


background color 


in text boxes 123 
Site view 48, 382 


background image offset 491 
backing up sites 56 
Backups folder 17 
banners 266 


adding 279 
assigning actions 278 
changing pictures 280 
custom names 47 
default location 266 
editing 245 
orientation 281 
setting style 281 
SiteStyle text 246 
using 278 


base directory 495 
BGSOUND SRC 387 
blank site 


default MasterBorder 128 


BODY BACKGROUND 387 
body style 253 
body text style 243 
borderless frames 140 
borders 156 


creating around pictures 187 
tables 223 


Browser Safe Palette 15 
browsers 


action support 351 
compatibility options 97 
default display font 126 
displaying forms 395 
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font settings 23 
fonts in AutoFrames 137 
frame support 137 
frameless, alternate content 459 
previewing sites 22 
redirecting site visitors 421 
refreshing pages 144 
setting compatibility 52 
using unsupported image files 184 


bullet type 171 
bulleted lists 168 


bullet type 171 


button navigation bars 266 


adding 267 
default location 266 
see also navigation bars 
setting style 272 


buttons 266 


changing picture on one button 275 
custom names 47 
default style 266 
rollover action 368 
SiteStyle text 246 


C 
cascading actions 362 
CGI directory for publishing 514 
CGI scripts 512 


naming conventions 395 
processing data 406 
support 406 


CGI-BIN folder 407 
character sets 


available 522 
imported pages 525 
overview 521 
page 524 
section 524 


check boxes in forms 399 
checklist, publish profile 494 
child pages 34 
CHMOD command 515 
class files 344, 346 
client-side imagemaps 298 
collision detection action 370 
Color Picker 14 
colors 


Browser Safe palette 15 
changing 14 
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HTML code 451 
palettes 15, 16 
text 151 
Web safe 14 


combo boxes in forms 400 
Common Gateway Interface 


see CGI 


Component Development Kit (CDK) 409 
components 


Ad Banner 410 
DynaButtons 412 
Go Menu 416 
internal components 410 
Page components 410 
Picture Loader 415 
Picture Rollover 418 
Publish components 410 
rotating banner 410 
Rotating Picture 420 
Screen Door 421 
Site Mapper 423 
third-party components 410 
Ticker Tape 424 
Time Based Picture 426 
types 


Components folder 16 
Components toolbar 81 
containers 


defined 92 
Layout Regions 107 
Layouts 107 
text boxes 117 


control bar 12 
conventions 3 
cropping pictures 185 
Current Site Options dialog 97 
custom attribute 166 
custom messages in actions 370, 371 
customized assets 510 
customizing 


templates 62 


D 
data fields 


defined 430 
formatted text 435 
image file 435 
simple text 435 


data list icon 
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SiteStyle, editing 249 


data lists 


creating 438 
defined 430 
searching 13 


data objects 


defined 430 
deleting 446 
external 433, 436 
internal 433, 434 
managing 480 


data publishing 429 


data lists, creating 438 
process 432 
stacked pages 441 


data, submitting via email 405 
date format 25 
date property, published sites 510 
dcr files 330 
decimal format 25 
deleting 


anchors 288 
data objects 446 
file assets 474 
folders 509 
links 297, 479 
MasterBorders 134 
stacked pages 445 
table rows and columns 226 
text styles 167 
unused file assets 475 
variables 482 


dir files 330 
Director 


ActiveX control 331 
Netscape plugin 331 


directory structure 497 


custom HTML 447 
customizing 508 
external HTML 387, 389 


distributing objects 87 
dithering in transparent .gif files 188 
dll files 349 
Document Map 450 
documents 


importing 70, 82 


domain names 


imported sites 69 


drop-down lists in forms 400 
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dxr files 330 
DynaButtons component 412 


sub-buttons 413 


Dynamic Page Layout 


HTML output method 96, 99 
optimizing output 99 
using with actions 351 


dynamic page layout 254 
dynamic pages 351 


E 
edit fields in forms 395 
edit style background 


SiteStyle 250 


editing 


anchors 287 
color palettes 16 
custom HTML you added 455, 462 
file assets 473, 474 
hotspots 299 
HTML 448 
HTML and scripts 451 
imagemaps 299 
links 297, 299 
paths to custom HTML assets 447 
SiteStyles 262 
variables 482 


ellipses, see shapes 
email links 291 
email, submitting forms data 405 
EMBED SRC 387 
Embedded object icon 76 
embedded objects 


creating 120 
moving 120 


exporting 


sites 61 


expressions, JavaScript 366 
external data objects 


definition of types 433 
filtering 439 
ODBC drivers 436 


external file editors 


setting 21 


external HTML 


adding 380 
assets managed 387 
distinguishing in Site view 382 
publishing unmodified code 388 
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referencing as object 384 
referencing external HTML 379 
referencing from Site view 380 
referencing in the Layout area 382 
referencing instead of importing 380 
sizing on page 386 


external links 284 


creating 290 
updating 477 


F 
fields 


adding to internal data object 435 
adding to stacked pages 442 
changing field names 436 
displaying all on Layout 440 
inserting 174 


file 


directory structure 497 


file assets 


adding 472 
deleting 474, 475 
editing 474 
external HTML 387 
managing 471 
opening 474 
types 471 
verifying 475 


File Data Source, external data objects 437 
file editors 


setting external 21 


file formats 


.jpg/.jpeg files 435 
audio 336 
for internal data 435 
images 182 
Shockwave 330 
video 335 


file links 284 


creating 293 


file names 


HTML 467 
in frameset files 467 


files 


.nod 30 
moving 63 
renaming 509 
site files 30 


filtering external data 439 
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firewalls, publishing with 517 
Fixed Page Layout 


forms 395 
HTML output method 96, 103 
overlapping objects 89 


Flash files 328 
Flashpix files 182 
flyouts 11 
folders 


aliased 509, 512 
creating custom 508 
deleting 509 
renaming 509 


folders, virtual 


see aliased folders 512 


font size 153 
fonts 


browser fonts in AutoFrames 137 
browsers 23 
default display in browser 126 
SiteStyle banners and buttons 245 


Form Handler component 403 
form objects 


adding 394 
creating 394 
naming 395 
warning icons 395 


form responses, processing 406 
Form toolbar 80, 394 
formatted text fields 435 
forms 


adding objects 394 
assigning CGI script 406 
check boxes 399 
combo boxes 400 
creating 392 
displaying in browsers 395 
edit fields 395 
Fixed Page Layout 395 
Form Handler 403 
Form toolbar 394 
hidden fields 408 
HTML output method 395 
multiple-line text fields 397 
objects 394 
passwords 396 
position-based 392 
radio buttons 398 
Reset button 401 


NOF7.5UG~1.BOO Page 535 Thursday, January 21, 1904 11:14 PM 


Submit button 401 
submitting data in email 405 
submitting data to text files 403 
submitting responses as plain text 403 
tables 392 
text-based 392 
types 392 


fpx picture files 182 
frameless browsers, alternate content 459 
frames 


adding 138 
AutoFrames 137 
borderless 140 
browser support 137, 459 
coding your own 466 
creating default target 460 
defined 136 
generating borders in HTML frames 140 
generating visible borders 140 
HTML 137 
links within 137 
padding 141 
properties 141 
selection sequence 139 
setting background 142 
spacing 141 
targeting in HTML 143 
using in external HTML 381 
using with actions 351 
see also AutoFrames 


framesets 137 


accessing HTML in AutoFrames 456 
coding your own 466 


FTP host 495, 501 
FTP settings 516 


G 
generate HTML files 484 
GIF 


transparent 491 


gif files 182 


animated 182 
dithered background 188 
editor, choosing 21 
transparent 188 


Go menu 12 
Go Menu component 416 
graphic-based Layouts 92 
Graphics Interchange Format 
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see gif files 


grids 


Layout Region 111 
showing/hiding 76 
snap to 88 


guides 


adding/moving/deleting 88 
Layout Region 111 
showing/hiding 76, 88 
snap to 88 


H 
HEAD 


referencing externally 381 
using content in external HTML 389 


Headspace Beatnik files 340 
help 


online help topics 4 
QuickStart tips 
View tips 2 
What s This? 5 


home page file name 489, 502 
hotspots 298 


adding HTML 299 
editing 299 


HTML 


accessing 447 
adding to AutoFrames 455, 459 
adding to hotspots 299 
adding to links 297 
adding to object 461, 463 
adding to page 448 
coding your own frames 466 
coding your own frameset 466 
colors in code 451 
custom file extensions 47 
custom, editing 455, 462 
custom, managing assets 447 
drawing horizontal rules 233 
editing 448 
editor, choosing 21 
file names 46 
frames 137 
importing pages 82 
importing tables 67 
inserting in text box 464 
Layouts 93 
minimizing file size 394 
referencing external 379 
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syntax when adding 447 
typing a tab character 455 
see also specific HTML tag 


HTML examples 


accommodating frameless browsers 459 
auto-forwarding from transition page 458 
coding frames 466 
creating default target frame 460 
displaying Alert on mouse-click 463 
indexing pages for search engines 457 


HTML file name extension 489 
HTML files 


generate 484, 492 


HTML meta tags 491 
HTML options 489 
HTML output 


Dynamic Page Layout 96, 99 
Dynamic Page Layout, actions 351 
Fixed Page Layout 96, 103 
previewing tables 101 
Regular Tables 96, 103 
selecting method 96 
setting for publishing 96 
setting output method 113 


HTML Source Editor 


defined 450 
tabs for frames 451 


HTML Source view 


adding and editing code 451 
defined 448 


HTML tag icon 76 
HTML-based Layouts 93 


I 
icons 


indicator 75 
object 75 


image file fields 435 


adding images 446 
identifying 443 


image files 


formats 182 
SiteStyle formats 255 
stacked pages and Assets view 472 
thumbnail 183 
transparent .gif files 188 
unsupported formats 183 
see also pictures 


image name 
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auto-generated 509 


imagemaps 


creating 298 
editing 299 
hotspots 298 


images 


adding to stacked pages 445 
editing 84 


IMG SRC 387 
importing 


assets 67 
HTML pages 82 
HTML tables 67 
Microsoft Word documents 70 


INPUT SRC 388 
internal components 410 
internal data fields, changing names 436 
internal data objects 


adding stacked pages 445 
creating 434 
defined 433 


internal links 284, 285 


J 
jar files 346 
Java 


applets 344 
file parameters 345 
files 344 
servlets 344 


Java Beans 346 


adding actions 348 


Java folder 16 
JavaScript 


in actions 365, 366 
in links 297, 463 


Joint Photographic Experts Group, see jpg/jpeg files 
jpg/jpeg files 182 


editor, choosing 21 


K 
keyboard shortcuts 12 
keywords 


setting META tags 54 


L 
Layers 


overlapping objects 89 


layout methods and design priorities 105 
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Layout Regions 


adding objects 111 
container 92 
converting to table 112 
creating 111 
defined 110 
grids/guides 111 
minimizing HTML 394 
setting background color 114, 123, 224, 229, 276 
setting HTML output method 113 
working with 110 


Layouts 


accessing HTML 448 
adding objects 110 
adding sounds 115 
cascading action messages to 362 
container 92 
creating 108 
defined 8, 108 
deleting 108 
external HTML 382 
graphics based 92 
HTML-based 93 
multiple 108 
naming 109 
naming requirements 109 
selecting 108, 109 
selecting layout method 93 
setting background color 114, 123, 224, 229, 276 
setting HTML output method 113 
showing/hiding label 75 
sizing 78, 110 
text-based 92 
working with 108 


lines 


adding SiteStyle 234 
constraining to horizontal/vertical 235 
drawing 235 
editing 237 
horizontal rules 233 
SiteStyle, editing 251 


Link icon 75, 296 
Link Tool 285 
links 


adding 479 
adding anchors 287 
adding HTML 297 
adding JavaScript 297 
broken, resolving 480 
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creating 284 
deleting 297, 479 
deleting anchors 287 
editing 297, 299 
editing anchors 287 
email 291 
external 284, 290 
external, updating 477 
file 284, 293 
following 296 
hotspots 298 
imagemaps 298 
in external HTML 387 
internal 284, 285 
mailto 284, 291 
managing 477 
relative 292 
smart 284, 288, 289 
targeting 143 
text, adding actions 358 
untargeted 144 
updating targets 479 
verifying 480 
within a frame 137 
see also anchors 


lists 


formatting 169 


local server 492 


M 
Machine Data Source, external data objects 437 
Macromedia Director, see Director 
Macromedia Flash 328 
Macromedia Shockwave, see Shockwave 
mailto links 284, 291 
margins 128 
MasterBorders 


accessing/adding HTML 448 
applying 132 
changing 132 
changing margins 130 
converted from AutoFrames, effect on HTML 456 
creating 131 
default in blank site 128 
defined 75, 128 
deleting 134 
modifying 129 
naming 133 
selecting 129 
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setting for multiple pages 133 
setting properties 129 
showing/hiding 75 
sizing 78, 130 
with actions 353, 362 
ZeroMargins 128 


measurement unit 


choosing 21 


media files 


replacing 342 
sample 327 


messages 


Alert, displaying on mouse-click 463 


META tag 491 
META tags 39, 457, 458 


author 54 
keywords 54 


Microsoft Internet Explorer 


action support 351 


Microsoft Word 


importing documents 82 


Microsoft Word documents 


importing 70 


midi files 337 
mov files 333 
MPEG formats 335 


N 
naming 


custom for assets 473 
files 509 
folders 509 
form objects 395 
Layouts 109 
MasterBorders 133 
objects 86 
pages 46 
sites 59 


navigating 12 


between pages 76 
control bar buttons 12 
Site Navigation palette 77 


navigation bars 243, 266 


actions 267 
highlighted buttons 272 
primary and secondary 268 
rollover buttons 272 
see also button navigation bars, text navigation bars 
setting border width 274 
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setting button spacing 274 
setting display options 269 
setting targets 278 
setting type 273 
using 266 


navigation buttons 


adding to stacked pages 440 
stacked pages 444 


navigation controls, see banners, button navigation bars, text navigation bars 
NetObjects Component Development Kit (CDK) 409 
NetObjects Fusion 


folder structure 16 
navigating 12 
starting 30 
updating 27 
views 8 


NetObjects Fusion Components, see components 
NetObjects System folder 17 
Netscape Navigator 


action support 351 
ActiveX support 349 


NFX components, see components 
nod files 30 
NOFRAMES tag 459 
normal (P) style 253 
numbered lists 168 


start value 170 


O 
object HTML, examples 463 
Object Tree 85 


in actions 355, 363, 375 
using with tables 222 


objects 


accessing/adding HTML 461 
adding 79 
adding actions 353 
adding to Layout Regions 111 
adding to Layouts 110 
aligning 87 
coding your own 465 
copying 86 
creating embedded 120 
distributing 87 
dragging and dropping 82 
embedding 92, 119 
formatting 158 
layering 89 
moving 86 
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naming 86 
optimizing placement on page 100 
overlapping 89, 96 
pasting 87 
placing 79 
resizing 86 
selecting 85 
showing/hiding indicator icons 75 
showing/hiding outlines 75 
sizing 86 
snapping 88 
updating multiple instances 83 
wrapping text around 121 


ocx files 349 
ODBC 


drivers 436 


online help, see help 
Open Data Base Connectivity 


see ODBC 436 


options 


HTML 489 
preview 22 


orientation, Site view 48 
Outline view 49 
output method 


see HTML output 


ovals, see shapes 
overlapping objects 89 


P 
padding 156 
Page components 410 
Page Design view 74 
page layout 


see Layouts 


page names 


allowable characters 46 
character requirements 526 
setting 278 
spaces in 46, 467 


Page Preview 74 
page size 77 
Page view 8, 73 


displaying pages 76 
referencing external HTML 382 


pages 


accessing/adding HTML 448 
adding 43 
adding actions 353 
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assigned MasterBorder 37 
character set 524 
child 34 
color coding in Site view 38 
containing file assets, displaying 474 
containing links, displaying 479 
copying 43 
default size 53 
deleting 44 
displaying 76 
Don t Publish setting 38 
dynamic 351 
editing HTML 448 
importing 82 
indexing for search engines 457 
margins 128 
moving 44 
naming 37 
navigating 76 
optimizing object placement 100 
parent 34 
pasting 43 
redirecting site visitors 421 
referencing external HTML 382 
renaming 46 
searching 13 
selecting 34 
selecting multiple 35 
selecting sections 35 
setting background 114, 123, 224, 229, 276 
setting Management properties 38 
setting properties 37, 41 
setting size 77 
showing/hiding Layout and MasterBorder labels 75 
sibling 34 
site sections 35 
sizing 77 
title in browser window 37 
transition, creating 458 


palettes 


color 15 
properties 10, 21 
showing/hiding 75 


parameters 


action 357 


parent pages 34 
passive mode 516 
passwords 


forms 396 
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paths 


custom HTML assets, editing 447 
in external HTML 387, 389 
in frameset files 467 


pdf files 340 
photo galleries 


adding 194, 195, 304, 305 
adding captions 202 
adding photos 196, 306 
adding text 202 
adding titles 202 
arranging photos 198 
controlling download time 209, 321 
deleting 219 
editing captions 202 
editing properties 202 
editing titles 202 
formatting photo captions 207 
formatting photo pages 216 
formatting photo titles 205 
formatting text 205 
formatting thumbnail page 213 
formatting thumbnail titles 208 
navigating photo pages 217 
removing 219 
removing photos 201 
resizing photos 199 
site navigation 218, 325 
using existing 195, 305 


photo pages 


formatting 216 
navigating 217 
selecting frame template 217 


Picture Loader component 415 
Picture Rollover component 418 
pictures 


adding 182 
adding text 172 
adding to stacked pages 445 
changing in banners 280 
changing on one button 275 
creating borders 187 
cropping 185 
rotating 186 
sizing 184 
tiling 186 


png files 182 
polygons, see shapes 
Portable Network Graphics 
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see png files 


position-based forms 392 
preferences 


international 25 


Preferences dialog, see Application Options dialog 
Preview folder 17 
Preview Site button 12 
previewing 


choosing browser 22 
setting scope 22 
setting window size 23 


primary button states 243 
primary navigation bars 243, 268 
printing 


SiteStructure 50 


Properties palette 10 
protected code 448 
proxy server 517 
publish 484 
Publish components 410 
publish components 504 
publish profiles 484 


checklist 494 
defining 488 
exporting 62 
global 503 


Publish view 9, 486 
publishing 


aliased folders 509, 512 
asset type directory structure 497 
base directory 495 
CGI directory 514 
configuring setup 497 
creating custom folders 508 
custom properties 510 
customizing directory structure 508 
data,see data publishing 
deleting folders 509 
external HTML, unmodified 388 
firewall 517 
firewalls 517 
flat directory structure 497 
forced 472 
FTP host 495 
guidelines 485 
locally 487 
managing script assets 518 
overlapping objects 96 
properties 510, 511 
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proxy servers 517 
publish profile checklist 494 
publish profiles 488 
read-only folders, pages, assets 510 
rearranging directory structure 510 
referenced pages 380 
remote profiles 500 
renaming custom files/folders 509 
server profiles 499 
setting HTML output 96, 97 
site section directory structure 497 
special assets 518 
unmanaged assets 389 


publishing directory 495 
publishing method 


see HTML output 


publishing options and design priorities 105 


Q 
qt files 333 
QuickTime movies 


display options 333, 334 
inserting 332 
volume 334 


QuickTime plugin 332 
quote type 53 


R 
ra/ram files 337, 338 
radio buttons in forms 398 
read only 245 
read-only folders, pages, assets 510 
RealAudio files 337, 338 
RealSpace FlashPix files 340 
rectangles, see shapes 
referenced files 


publishing 380 


referencing external HTML 


see external HTML 


Regular Tables 


HTML output method 96, 103 


regular tables 254 
relative links 292 
relative paths 


in external HTML 387 
in frameset files 467 


remote publishing 


defining profiles 500 


Reset button in forms 401 
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resize 


panes in HTML Source view 450 


resizing 


objects 86 


Rich Music Format files 337 
right-click menus 13 
rmf files 337 
rotating 


pictures 186 
text 174 


Rotating Picture component 420 
rounded rectangles, see shapes 
rulers 


showing/hiding 76, 88 


S 
Sample Sites folder 17 
saving sites 20 
scaling pictures 184 
scope 162 
Screen Door component 421 
Script icon 75 
SCRIPT keywords 451 
SCRIPT SRC 388 
SCRIPT tags 447 
scripts 


adding to AutoFrames 455 
adding to objects 461 
adding to page HEAD or BODY 448 
inserting in actions 365, 366 
inserting in links 463 
inserting in text boxes 464 
managing assets 388, 518 


scrolling lists in lists 400 
scrolling messages 424 
search engines 


directory structure for publishing 498 
indexing pages 457 
keywords 54 


secondary button states 243 
secondary navigation bars 243, 268 
sections 35 


applying MasterBorder 133 
character set 524 


selecting 


Layouts 108, 109 
MasterBorders 129 
objects 85 
table cells 230 
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text 150 
text boxes 118 
tools from flyout 11 


server contents 504 
server permissions 515 
server port 515 
server profiles 499 


publishing 499 


server setup 494 


checklist 494 


servers 


publish profiles 500 
publishing with proxy servers 517 


server-side imagemaps 298 
Set Action dialog 353 


customizing 377 


shapes 


adding text 172 
drawing 232 
editing lines of polygons 233 
varying curve of rounded rectangles 233 


Shockwave files 


audio 330 
Director 330 
formats 330 
inserting 330 


Shockwave plugin 330 
shortcuts 


keyboard 12 
menus 13 


shtml files 48 
sibling pages 34 
simple text fields 


creating 435 


single-line text fields 


see edit fields 


site 


transfer to Web 505 


site files 30 
Site Mapper component 423 
Site Navigation palette 77 
site section directory structure, publishing 497 
Site view 8, 29 


background color 48 
orientation 48 
Outline view 49 
SiteStructure 34 


sites 


backing up 51, 56 


NOF7.5UG~1.BOO Page 550 Thursday, January 21, 1904 11:14 PM 


551 


converting 65 
copying 63 
creating 31, 58 
distributing 63 
domain names 69 
expanding 59, 70 
exporting 61 
importing 65, 66 
inserting templates 60 
modification history 55 
moving 63 
naming 32, 59 
opening 33 
opening last automatically 20 
referencing external HTML 380 
saved 30 
saving 20 
searching 13 
selecting sections 35 
setting browser compatibility 52 
setting options 52 
setting publishing method 97 
sharing 63 
structure 34 
wizards 33 


SiteStructure 34 


expanding and collapsing 48 
printing 50 


SiteStyles 


adding 256 
adding SiteStyle lines 234 
applying 244 
creating 254 
defined 240 
editing 244, 251, 262 
folder structure 262 
importing 256 
managing 256 
removing 261 
text in banners and buttons 246 
updating list 261 


sizing 


columns in tables 225 
Layouts 110 
Layouts to objects 386 
MasterBorders 130 
multiple objects 86 
objects 86 
pages 77 
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pictures 184 
rows in tables 225 
text 151 
text boxes 122 


smart links 284 


creating 288 
defined 288 
stacked pages 444 
types 289 


sort order 25 
sounds 


file display options 338, 339 
file formats 115 
inserting 336 
page 115 


spans 


creating 160 


spelling checker 176 
spelling dictionary 25 
spl files 328 
Splash files 328 
stacked pages 441 


adding for internal data 445 
adding navigation buttons 440, 444 
adding pictures 445 
adding text 445 
defined 431 
deleting 445 
designing 442 
image files and Assets view 472 
moving through pages 444 
using smart links 444 
see also pages 


Standard toolbar 80 
starting NetObjects Fusion 30 
structural links, see smart links 284 
Style view 8, 240, 242 
styles 


automatic 149 


Styles folder 17 
sub-buttons 413 
Submit button in forms 401 
swa files 330 
swf files 328 
symbols 


inserting 171 


T 
tab, typing in HTML 455 
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tables 


adding 222 
background 224 
border thickness 223 
cell background 229 
cell padding 223 
cell spacing 224 
column width 227 
container 92 
converting Layout Regions 112 
deleting rows and columns 226 
forms 392 
identifying objects 222 
inserting rows and columns 226 
merging cells 226 
rendering speed 224 
row height 227 
selecting cells 230 
selecting rows and columns 227 
setting cell properties 228 
setting row and column properties 227 
setting table properties 223 
sizing cells 229 
sizing columns and rows 225 
splitting cells 226 
working with cells 228 


targets 


creating default frames 460 
in actions 352, 355 
managing 477 
navigation bar 278 
updating link 479 


templates 


appending 59 
Blank Site 31 
creating 61 
creating sites 58 
customizing 62 
defined 31, 57 
expanding an existing site 59 
exporting sites 61 
including publish profiles 62 
inserting 59, 60 
using 57 


Templates folder 17 
testing your site 12 
text 


adding 146 
adding actions 358 
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adding to photo gallery 202 
adding to picture 172 
adding to shape 172 
adding to stacked pages 445 
aligning 174 
applying styles 160 
assigning font styles 151 
bulleted lists 168 
checking spelling 176 
copying and pasting 147 
creating styles 163 
creating user-defined variables 175 
deleting styles 167 
dragging and dropping 147 
finding 178 
formatting 150 
formatting photo gallery 205 
inserting symbols 171 
inserting variables 174 
modifying styles 167 
numbered lists 168 
Paste Special 147 
rotating 174 
searching 178 
selecting 150 
setting color 151 
setting size 151 
SiteStyle banners and buttons 245 
spans 160 
submitting form responses 403 
typing 146 
word count 179 
wrapping around objects 121 


text boxes 


adding 118 
container 92, 117 
embedding objects 119 
inserting HTML/scripts 464 
scaling contents 124 
selecting 118 
setting background color 123 
setting minimum height 122 
sizing 122 


text fields 


formatted 435 
simple 435 


text files 


submitting forms data 403 


text navigation bars 266 
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default location 266 
see also navigation bars 


text styles 


applying 160 
applying custom style 161 
creating 163 
editing 251 
modifying 160 
scope 162 


text-based 


Layouts 92 


text-based forms 392 
third-party components 410 
thumbnail image 183 
thumbnail page 


formatting 213 
selecting template 214 


Ticker Tape component 424 
tiling pictures 186 
Time Based Picture component 426 
time format 25 
toolbars 11, 79 


flyouts 11 
hiding/showing 11 
showing/hiding 75 


tools 


Data Field 442 
Selection tool 79, 85 
sticky tools 79 
toolbars 11, 79 
using to add objects 79 
Zoom 11 


transfer site files 484, 494 
transition page, creating 458 
transparent .gif files 188 
transparent GIF 491 
trigger events, actions 352, 354 
tutorial 2 
Tutorial folder 17 


U 
Universal Resource Locators, see URLs 
unprotected code 448 
URLs 


external links 290 
protocol 290 


User Sites folder 17, 30 
user-defined variables 175 
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V 
variables 


adding 481 
deleting 482 
editing 482 
inserting in text 174 
managing 481 
user-defined 175 


video files 


display options 336 


views 8 


Assets view 470 
Page Design view 74 
Page Preview 74 
Page view 73 
Publish view 486 
Style view 240 


virtual folders,see aliased folders 
VRML files 340 


W 
Warning icon 76 
wav files 337 
Web 


transfer your site 505 


Web server, transfer site files 494 
Web sites 


importing 65 


What s This? popup 13 
window size at startup 20 
Windows Media formats 335 
Windows Media Player 335 
wizards 33 
word count 179 
wrapping text around objects 121 


Z 
ZeroMargins MasterBorder 128 


external HTML 381, 389 


Zooming in/out 11 
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